|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="panel" @mousemove.prevent @touchmove.prevent :style="{ top: panelNewTop == null ? null : `${panelNewTop}px` }">
|
|
|
- <slot :isOpen="props.isOpen" @openPanel="clickaa"></slot>
|
|
|
+ <slot></slot>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -16,9 +16,15 @@ const props = defineProps({
|
|
|
|
|
|
watch(
|
|
|
() => props.isOpen,
|
|
|
- (val, old) => {
|
|
|
- if (val) {
|
|
|
- openPanel();
|
|
|
+ () => {
|
|
|
+ const $panel = document.querySelector(".panel");
|
|
|
+ let orgTop = $panel.offsetTop;
|
|
|
+ let newTop = window.innerHeight - $panel.clientHeight;
|
|
|
+ let value = orgTop - newTop;
|
|
|
+ if (value > 0) {
|
|
|
+ openPanel($panel, orgTop, value);
|
|
|
+ } else {
|
|
|
+ resetPanel();
|
|
|
}
|
|
|
}
|
|
|
);
|
|
@@ -46,28 +52,21 @@ const resetPanel = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-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 openPanel = ($panel, orgTop, value) => {
|
|
|
+ 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);
|
|
|
- }
|
|
|
+ const $color = $panel.querySelectorAll(".color");
|
|
|
+ $color.forEach((item) => {
|
|
|
+ item.style.backgroundColor = `rgba(0, 0, 0, ${opc})`;
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|