vue 3 文件上传组件实现拖拽高亮需监听 dragenter、dragover、dragleave 事件，用 isdragging 控制样式；dragover 必须 .prevent 阻止默认行为；注意子元素干扰和多文件边界处理。
在 Vue 3 文件上传组件中实现拖入、移出和释放时的高亮反馈，核心是监听 HTML5 的 dragenter、dragleave 和 dragover 事件，并配合状态变量控制样式。drop 本身不触发高亮，但它是拖拽流程的终点，常与高亮逻辑联动。
1. 绑定关键拖拽事件并管理高亮状态
使用响应式变量（如 isDragging）标记当前是否处于拖拽悬停状态。注意：dragover 必须阻止默认行为，否则浏览器会尝试打开文件，导致拖拽中断：
-
@dragenter.prevent="isDragging = true"：文件首次进入区域，开启高亮 -
@dragover.prevent：持续触发，必须加.prevent，否则高亮会立即失效 -
@dragleave.prevent="isDragging = false"：文件离开区域，关闭高亮 -
@drop.prevent="handleDrop"：文件释放，执行上传逻辑，通常也需重置高亮（isDragging = false）
2. 样式层面响应高亮状态
通过动态 class 控制视觉变化。例如：
- 基础区域加边框：
border: 2px dashed #d9d9d9 - 高亮时增强样式：
:class="{ 'border-blue-500 bg-blue-50': isDragging }" - 可选添加过渡效果提升体验：
transition: all 0.2s ease
3. 注意边界情况处理
实际使用中容易忽略两点：
- 子元素干扰：如果拖拽区域内部有嵌套元素（如图标、文字），
dragleave可能在跨子元素时误触发。解决方案是用event.relatedTarget判断是否真正离开整个容器，或统一在根容器上监听，避免子元素绑定拖拽事件 - 多文件支持：高亮只反映“是否有文件在区域内”，与文件数量无关；
event.dataTransfer.files在drop时才可用，不要在dragenter中尝试读取
4. 完整模板片段示例
结构简洁、无多余依赖：
<div ref="dropArea" class="drop-area p-8 border-2 border-dashed rounded-lg text-center cursor-pointer" :class="{ 'border-blue-500 bg-blue-50': isDragging }" true false>
<p>拖拽文件到此处，或点击选择</p>
<input type="file" ref="fileInput" class="hidden" multiple>
</div>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
