mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-06 10:23:57 +08:00
refactor(DownloadQueue): 移除无用的滚轮隐藏队列逻辑与相关依赖
移除了页面滚轮事件监听、isHidden状态和相关的DOM引用,简化组件逻辑
This commit is contained in:
@@ -1,12 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
ref="queueRef"
|
|
||||||
class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white shadow-2xl transition-all duration-200 dark:border-slate-800/70 dark:bg-slate-900 sm:left-auto sm:right-6 sm:w-96"
|
class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white shadow-2xl transition-all duration-200 dark:border-slate-800/70 dark:bg-slate-900 sm:left-auto sm:right-6 sm:w-96"
|
||||||
:class="
|
|
||||||
isHidden
|
|
||||||
? 'translate-y-[calc(100%-3.5rem)]'
|
|
||||||
: 'translate-y-0'
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between px-5 py-4"
|
class="flex items-center justify-between px-5 py-4"
|
||||||
@@ -136,7 +130,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
import { computed, ref } from "vue";
|
||||||
import type { DownloadItem } from "../global/typedefinition";
|
import type { DownloadItem } from "../global/typedefinition";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
@@ -153,41 +147,12 @@ const emit = defineEmits<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const isExpanded = ref(false);
|
const isExpanded = ref(false);
|
||||||
const isHidden = ref(false);
|
|
||||||
const queueRef = ref<HTMLElement | null>(null);
|
|
||||||
|
|
||||||
const onWheel = (event: WheelEvent) => {
|
|
||||||
if (queueRef.value?.contains(event.target as Node) || event.deltaY === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.deltaY > 0) {
|
|
||||||
isExpanded.value = false;
|
|
||||||
isHidden.value = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
isHidden.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
document.addEventListener("wheel", onWheel, { passive: true, capture: true });
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener("wheel", onWheel, { capture: true });
|
|
||||||
});
|
|
||||||
|
|
||||||
const completedDownloads = computed(() => {
|
const completedDownloads = computed(() => {
|
||||||
return props.downloads.filter((d) => d.status === "completed").length;
|
return props.downloads.filter((d) => d.status === "completed").length;
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleExpand = () => {
|
const toggleExpand = () => {
|
||||||
if (isHidden.value) {
|
|
||||||
isHidden.value = false;
|
|
||||||
isExpanded.value = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
isExpanded.value = !isExpanded.value;
|
isExpanded.value = !isExpanded.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user