|
@@ -1,26 +1,72 @@
|
|
|
<template>
|
|
|
<div class="panel" @mousemove.prevent @touchmove.prevent :style="{ top: panelNewTop == null ? null : `${panelNewTop}px` }">
|
|
|
- <slot></slot>
|
|
|
+ <slot :isOpen="props.isOpen" @openPanel="clickaa"></slot>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, computed, watch, nextTick } from "vue";
|
|
|
+import { ref, onMounted, computed, watch, nextTick, defineProps } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
|
|
|
+const props = defineProps({
|
|
|
+ isOpen: {
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.isOpen,
|
|
|
+ (val, old) => {
|
|
|
+ if (val) {
|
|
|
+ openPanel();
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
const panelNewTop = ref(null);
|
|
|
const panelOrgTop = ref(0);
|
|
|
-const show = ref(true);
|
|
|
+
|
|
|
const store = useStore();
|
|
|
|
|
|
const resetPanel = () => {
|
|
|
if (panelOrgTop.value > 0) {
|
|
|
- panelNewTop.value = panelOrgTop.value;
|
|
|
- const $panel = document.querySelector(".panel");
|
|
|
- const $color = $panel.querySelectorAll(".color");
|
|
|
- $color.forEach((item) => {
|
|
|
- item.style.backgroundColor = `rgba(0, 0, 0, ${0.2})`;
|
|
|
- });
|
|
|
+ KanKan.Animate.transitions.start((progress) => {
|
|
|
+ const $panel = document.querySelector(".panel");
|
|
|
+ let orgTop = $panel.offsetTop;
|
|
|
+ let newTop = panelOrgTop.value;
|
|
|
+ let value = orgTop - newTop;
|
|
|
+
|
|
|
+ panelNewTop.value = orgTop - value * progress;
|
|
|
+
|
|
|
+ const $color = $panel.querySelectorAll(".color");
|
|
|
+ $color.forEach((item) => {
|
|
|
+ item.style.backgroundColor = `rgba(0, 0, 0, ${0.2})`;
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const openPanel = () => {
|
|
|
+ const $panel = document.querySelector(".panel");
|
|
|
+
|
|
|
+ let orgTop = $panel.offsetTop;
|
|
|
+ let newTop = window.innerHeight - $panel.clientHeight;
|
|
|
+ let value = orgTop - newTop;
|
|
|
+ if (value > 0) {
|
|
|
+ KanKan.Animate.transitions.start((progress) => {
|
|
|
+ panelNewTop.value = orgTop - value * progress;
|
|
|
+ let opc = progress;
|
|
|
+ if (opc < 0.2) {
|
|
|
+ opc = 0.2;
|
|
|
+ } else if (opc > 0.5) {
|
|
|
+ opc = 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ const $color = $panel.querySelectorAll(".color");
|
|
|
+ $color.forEach((item) => {
|
|
|
+ item.style.backgroundColor = `rgba(0, 0, 0, ${opc})`;
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -28,6 +74,7 @@ onMounted(() => {
|
|
|
nextTick(() => {
|
|
|
document.querySelector(".player").addEventListener("touchstart", () => {
|
|
|
resetPanel();
|
|
|
+ // openPanel();
|
|
|
});
|
|
|
});
|
|
|
const $panel = document.querySelector(".panel");
|