Skip to content

Commit 7f39d28

Browse files
jlau-iceclaude
authored andcommitted
fix(frontend): hide upload mask when drag leaves window
Use dragCounter to track drag enter/leave events properly. The mask now hides when user drags file out of the browser window. - Add dragleave event listener - Use counter to handle nested element drag events - Reset counter on drop and unmount Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent faf1c9a commit 7f39d28

File tree

1 file changed

+16
-1
lines changed

1 file changed

+16
-1
lines changed

frontend/src/views/platform/index.vue

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ let ismask = ref(false)
2727
let uploadInput = ref();
2828
const { t } = useI18n();
2929
30+
// 用于跟踪拖拽进入/离开的计数器,解决子元素触发 dragleave 的问题
31+
let dragCounter = 0;
32+
3033
// 获取当前知识库ID
3134
const getCurrentKbId = (): string | null => {
3235
return (route.params as any)?.kbId as string || null
@@ -60,6 +63,7 @@ const checkKnowledgeBaseInitialization = async (): Promise<boolean> => {
6063
// 全局拖拽事件处理
6164
const handleGlobalDragEnter = (event: DragEvent) => {
6265
event.preventDefault();
66+
dragCounter++;
6367
if (event.dataTransfer) {
6468
event.dataTransfer.effectAllowed = 'all';
6569
}
@@ -71,11 +75,19 @@ const handleGlobalDragOver = (event: DragEvent) => {
7175
if (event.dataTransfer) {
7276
event.dataTransfer.dropEffect = 'copy';
7377
}
74-
ismask.value = true;
78+
}
79+
80+
const handleGlobalDragLeave = (event: DragEvent) => {
81+
event.preventDefault();
82+
dragCounter--;
83+
if (dragCounter === 0) {
84+
ismask.value = false;
85+
}
7586
}
7687
7788
const handleGlobalDrop = async (event: DragEvent) => {
7889
event.preventDefault();
90+
dragCounter = 0;
7991
ismask.value = false;
8092
8193
const DataTransferFiles = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
@@ -104,14 +116,17 @@ const handleGlobalDrop = async (event: DragEvent) => {
104116
onMounted(() => {
105117
document.addEventListener('dragenter', handleGlobalDragEnter, true);
106118
document.addEventListener('dragover', handleGlobalDragOver, true);
119+
document.addEventListener('dragleave', handleGlobalDragLeave, true);
107120
document.addEventListener('drop', handleGlobalDrop, true);
108121
});
109122
110123
// 组件卸载时移除全局事件监听器
111124
onUnmounted(() => {
112125
document.removeEventListener('dragenter', handleGlobalDragEnter, true);
113126
document.removeEventListener('dragover', handleGlobalDragOver, true);
127+
document.removeEventListener('dragleave', handleGlobalDragLeave, true);
114128
document.removeEventListener('drop', handleGlobalDrop, true);
129+
dragCounter = 0;
115130
});
116131
</script>
117132
<style lang="less">

0 commit comments

Comments
 (0)