Vue3自定义指令实战打造高交互拖拽弹窗组件在Web应用开发中弹窗组件几乎是每个项目都绕不开的UI元素。传统的弹窗实现往往需要手动编写大量DOM操作代码既难以维护又缺乏复用性。Vue3的自定义指令功能为我们提供了一种优雅的解决方案能够将复杂的交互逻辑封装成可复用的指令。本文将带你从零开始实现一个支持拖拽功能的弹窗组件通过这个实战案例深入理解Vue3自定义指令的强大之处。1. 准备工作与环境搭建在开始编写拖拽指令之前我们需要确保开发环境已经准备就绪。推荐使用Vite作为构建工具它能提供极快的开发体验。首先创建一个新的Vue3项目npm create vitelatest vue3-draggable-dialog --template vue-ts cd vue3-draggable-dialog npm install接下来我们创建一个基础的弹窗组件DraggableDialog.vuetemplate div v-draggable classdialog-container div classdialog-header h3{{ title }}/h3 button click$emit(close)×/button /div div classdialog-content slot/slot /div /div /template script setup langts defineProps({ title: { type: String, default: 对话框 } }) /script style scoped .dialog-container { position: fixed; width: 400px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; } .dialog-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; cursor: move; } .dialog-content { padding: 16px; } /style2. 实现基础拖拽指令现在我们来创建核心的拖拽指令。在src/directives目录下新建draggable.ts文件import { Directive } from vue interface DragState { startX: number startY: number startLeft: number startTop: number } const vDraggable: Directive { mounted(el: HTMLElement) { const header el.querySelector(.dialog-header) as HTMLElement if (!header) return let dragState: DragState | null null const handleMouseDown (e: MouseEvent) { // 只响应左键点击 if (e.button ! 0) return dragState { startX: e.clientX, startY: e.clientY, startLeft: el.offsetLeft, startTop: el.offsetTop } document.addEventListener(mousemove, handleMouseMove) document.addEventListener(mouseup, handleMouseUp) } const handleMouseMove (e: MouseEvent) { if (!dragState) return const dx e.clientX - dragState.startX const dy e.clientY - dragState.startY el.style.left ${dragState.startLeft dx}px el.style.top ${dragState.startTop dy}px } const handleMouseUp () { dragState null document.removeEventListener(mousemove, handleMouseMove) document.removeEventListener(mouseup, handleMouseUp) } header.addEventListener(mousedown, handleMouseDown) // 清理函数 el.__cleanupDraggable () { header.removeEventListener(mousedown, handleMouseDown) document.removeEventListener(mousemove, handleMouseMove) document.removeEventListener(mouseup, handleMouseUp) } }, unmounted(el) { // 清理事件监听 if (el.__cleanupDraggable) { el.__cleanupDraggable() } } } export default vDraggable这个基础实现已经能够满足简单的拖拽需求但它还有一些可以优化的地方没有边界检查弹窗可能会被拖出可视区域缺少拖拽时的视觉反馈没有考虑移动端触摸事件3. 增强拖拽指令功能让我们来增强这个指令的功能使其更加完善。以下是改进后的版本import { Directive } from vue interface DragState { startX: number startY: number startLeft: number startTop: number isDragging: boolean } const vDraggable: Directive { mounted(el: HTMLElement, binding) { const header el.querySelector(.dialog-header) as HTMLElement if (!header) return // 设置初始位置 el.style.position fixed if (!el.style.left !el.style.top) { el.style.left 50% el.style.top 50% el.style.transform translate(-50%, -50%) } let dragState: DragState | null null const handleMouseDown (e: MouseEvent) { if (e.button ! 0) return dragState { startX: e.clientX, startY: e.clientY, startLeft: parseInt(el.style.left) || 0, startTop: parseInt(el.style.top) || 0, isDragging: false } // 添加拖拽类名 el.classList.add(dragging) document.addEventListener(mousemove, handleMouseMove) document.addEventListener(mouseup, handleMouseUp, { once: true }) } const handleMouseMove (e: MouseEvent) { if (!dragState) return // 设置最小移动距离避免误触 if (!dragState.isDragging Math.abs(e.clientX - dragState.startX) 5 Math.abs(e.clientY - dragState.startY) 5) { return } dragState.isDragging true const dx e.clientX - dragState.startX const dy e.clientY - dragState.startY let newLeft dragState.startLeft dx let newTop dragState.startTop dy // 边界检查 newLeft Math.max(0, Math.min(newLeft, window.innerWidth - el.offsetWidth)) newTop Math.max(0, Math.min(newTop, window.innerHeight - el.offsetHeight)) el.style.left ${newLeft}px el.style.top ${newTop}px el.style.transform none } const handleMouseUp () { if (dragState?.isDragging) { e.preventDefault() // 防止触发点击事件 } cleanup() } const cleanup () { el.classList.remove(dragging) dragState null document.removeEventListener(mousemove, handleMouseMove) } header.addEventListener(mousedown, handleMouseDown) // 清理函数 el.__cleanupDraggable () { header.removeEventListener(mousedown, handleMouseDown) cleanup() } }, unmounted(el) { if (el.__cleanupDraggable) { el.__cleanupDraggable() } } } export default vDraggable对应的CSS可以添加一些拖拽时的视觉反馈.dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease; } .dragging .dialog-header { background-color: #f5f5f5; }4. 指令参数化与高级功能为了让我们的拖拽指令更加灵活我们可以通过指令的参数来配置不同的行为。修改指令定义使其支持以下参数interface DraggableOptions { handle?: string // 指定拖拽句柄选择器 bounds?: boolean | string // 边界限制 zIndex?: number // 拖拽时设置的z-index disabled?: boolean // 是否禁用拖拽 } const vDraggable: DirectiveHTMLElement, DraggableOptions | undefined { mounted(el, binding) { const options binding.value || {} const handleSelector options.handle || .dialog-header const handleEl el.querySelector(handleSelector) as HTMLElement if (!handleEl || options.disabled) return // 初始化位置 el.style.position fixed if (!el.style.left !el.style.top) { el.style.left 50% el.style.top 50% el.style.transform translate(-50%, -50%) } let dragState: DragState | null null let originalZIndex el.style.zIndex const handleMouseDown (e: MouseEvent) { if (e.button ! 0) return if (options.zIndex ! undefined) { el.style.zIndex options.zIndex.toString() } dragState { startX: e.clientX, startY: e.clientY, startLeft: parseInt(el.style.left) || 0, startTop: parseInt(el.style.top) || 0, isDragging: false } el.classList.add(dragging) document.addEventListener(mousemove, handleMouseMove) document.addEventListener(mouseup, handleMouseUp, { once: true }) } const handleMouseMove (e: MouseEvent) { if (!dragState) return if (!dragState.isDragging Math.abs(e.clientX - dragState.startX) 5 Math.abs(e.clientY - dragState.startY) 5) { return } dragState.isDragging true const dx e.clientX - dragState.startX const dy e.clientY - dragState.startY let newLeft dragState.startLeft dx let newTop dragState.startTop dy // 边界检查 if (options.bounds ! false) { const boundsEl typeof options.bounds string ? document.querySelector(options.bounds) : document.body if (boundsEl) { const boundsRect boundsEl.getBoundingClientRect() const elRect el.getBoundingClientRect() newLeft Math.max( boundsRect.left, Math.min( newLeft, boundsRect.left boundsRect.width - elRect.width ) ) newTop Math.max( boundsRect.top, Math.min( newTop, boundsRect.top boundsRect.height - elRect.height ) ) } } el.style.left ${newLeft}px el.style.top ${newTop}px el.style.transform none } const handleMouseUp () { if (dragState?.isDragging) { e.preventDefault() } cleanup() } const cleanup () { el.classList.remove(dragging) if (options.zIndex ! undefined) { el.style.zIndex originalZIndex } dragState null document.removeEventListener(mousemove, handleMouseMove) } handleEl.addEventListener(mousedown, handleMouseDown) // 清理函数 el.__cleanupDraggable () { handleEl.removeEventListener(mousedown, handleMouseDown) cleanup() } }, updated(el, binding) { // 如果disabled状态变化需要重新绑定/解绑事件 if (binding.oldValue?.disabled ! binding.value?.disabled) { const options binding.value || {} const handleSelector options.handle || .dialog-header const handleEl el.querySelector(handleSelector) as HTMLElement if (el.__cleanupDraggable) { el.__cleanupDraggable() } if (!options.disabled handleEl) { vDraggable.mounted(el, binding) } } }, unmounted(el) { if (el.__cleanupDraggable) { el.__cleanupDraggable() } } }现在我们可以这样使用增强后的指令template div v-draggable{ handle: .custom-handle, bounds: #app, zIndex: 1001 } classdialog-container div classcustom-handle h3可拖拽对话框/h3 /div div classdialog-content !-- 内容 -- /div /div /template5. 性能优化与最佳实践在实现拖拽功能时性能是一个重要考虑因素。以下是几个优化建议节流事件处理对于频繁触发的mousemove事件可以使用节流来减少处理频率const throttle (fn: Function, delay: number) { let lastCall 0 return function(...args: any[]) { const now Date.now() if (now - lastCall delay) return lastCall now return fn(...args) } } // 在指令中使用 const handleMouseMove throttle((e: MouseEvent) { // 处理逻辑 }, 16) // ~60fps使用CSS transform代替top/left现代浏览器对CSS transform的优化更好// 代替直接设置left/top el.style.transform translate(${newLeft}px, ${newTop}px)被动事件监听器对于不需要调用preventDefault()的事件可以标记为被动document.addEventListener(mousemove, handleMouseMove, { passive: true })避免强制同步布局在事件处理中避免连续读取和修改DOM属性移动端支持添加触摸事件处理const handleTouchStart (e: TouchEvent) { const touch e.touches[0] handleMouseDown(new MouseEvent(mousedown, { clientX: touch.clientX, clientY: touch.clientY })) } const handleTouchMove (e: TouchEvent) { const touch e.touches[0] handleMouseMove(new MouseEvent(mousemove, { clientX: touch.clientX, clientY: touch.clientY })) } // 添加触摸事件监听 handleEl.addEventListener(touchstart, handleTouchStart) document.addEventListener(touchmove, handleTouchMove)6. 与其他UI库的集成我们的拖拽指令可以很容易地与其他UI库集成。以下是与Element Plus对话框集成的示例template el-dialog v-modelvisible v-draggable title可拖拽对话框 width50% :modalfalse span这是一个可以拖拽的Element Plus对话框/span /el-dialog /template script setup langts import { ref } from vue const visible ref(true) /script style /* 覆盖Element Plus默认样式 */ .el-dialog { position: fixed; margin: 0 !important; } .el-dialog__header { cursor: move; } /style7. 测试与调试为了确保我们的拖拽指令在各种场景下都能正常工作我们需要进行全面的测试。以下是一些测试用例基础拖拽测试验证点击头部可以拖动对话框验证释放鼠标后对话框停留在正确位置边界条件测试验证对话框不会超出指定边界验证对话框在窗口resize后仍然保持正确位置性能测试在低端设备上测试拖拽流畅度同时打开多个可拖拽对话框测试性能移动端测试验证触摸拖拽功能测试在不同移动设备上的表现可以使用Vue Test Utils来编写单元测试import { mount } from vue/test-utils import { describe, it, expect } from vitest import vDraggable from /directives/draggable import DraggableDialog from /components/DraggableDialog.vue describe(Draggable Directive, () { it(should move dialog when dragged, async () { const wrapper mount(DraggableDialog, { global: { directives: { draggable: vDraggable } } }) const dialog wrapper.find(.dialog-container) const header wrapper.find(.dialog-header) // 初始位置 const initialLeft parseInt(dialog.element.style.left) const initialTop parseInt(dialog.element.style.top) // 模拟拖拽 await header.trigger(mousedown, { clientX: 0, clientY: 0 }) document.dispatchEvent(new MouseEvent(mousemove, { clientX: 100, clientY: 100 })) document.dispatchEvent(new MouseEvent(mouseup)) // 验证位置变化 expect(parseInt(dialog.element.style.left)).toBe(initialLeft 100) expect(parseInt(dialog.element.style.top)).toBe(initialTop 100) }) })8. 实际应用案例让我们看一个实际应用场景在一个任务管理应用中实现可拖拽的详情面板。template div classtask-manager div classtask-list div v-fortask in tasks :keytask.id classtask-item clickopenTaskDetail(task) {{ task.title }} /div /div div v-ifselectedTask v-draggable{ handle: .detail-header, zIndex: 100 } classtask-detail div classdetail-header h3{{ selectedTask.title }}/h3 button clickselectedTask null关闭/button /div div classdetail-content p{{ selectedTask.description }}/p p截止日期: {{ selectedTask.dueDate }}/p /div /div /div /template script setup langts import { ref } from vue interface Task { id: number title: string description: string dueDate: string } const tasks refTask[]([ { id: 1, title: 完成项目提案, description: 撰写并提交季度项目提案文档, dueDate: 2023-11-15 }, { id: 2, title: 团队会议, description: 每周团队进度同步会议, dueDate: 2023-11-10 } ]) const selectedTask refTask | null(null) const openTaskDetail (task: Task) { selectedTask.value task } /script style scoped .task-manager { display: flex; height: 100vh; } .task-list { width: 300px; padding: 16px; border-right: 1px solid #eee; } .task-item { padding: 8px; margin-bottom: 8px; background: #f5f5f5; cursor: pointer; } .task-detail { position: fixed; left: 350px; top: 50px; width: 400px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .detail-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; cursor: move; } .detail-content { padding: 16px; } /style在这个案例中用户可以点击任务列表中的项目右侧会弹出可拖拽的详情面板。用户可以自由拖动面板到合适的位置而不会影响其他操作。
Vue3自定义指令实战：手把手教你写一个拖拽弹窗（附完整代码）
Vue3自定义指令实战打造高交互拖拽弹窗组件在Web应用开发中弹窗组件几乎是每个项目都绕不开的UI元素。传统的弹窗实现往往需要手动编写大量DOM操作代码既难以维护又缺乏复用性。Vue3的自定义指令功能为我们提供了一种优雅的解决方案能够将复杂的交互逻辑封装成可复用的指令。本文将带你从零开始实现一个支持拖拽功能的弹窗组件通过这个实战案例深入理解Vue3自定义指令的强大之处。1. 准备工作与环境搭建在开始编写拖拽指令之前我们需要确保开发环境已经准备就绪。推荐使用Vite作为构建工具它能提供极快的开发体验。首先创建一个新的Vue3项目npm create vitelatest vue3-draggable-dialog --template vue-ts cd vue3-draggable-dialog npm install接下来我们创建一个基础的弹窗组件DraggableDialog.vuetemplate div v-draggable classdialog-container div classdialog-header h3{{ title }}/h3 button click$emit(close)×/button /div div classdialog-content slot/slot /div /div /template script setup langts defineProps({ title: { type: String, default: 对话框 } }) /script style scoped .dialog-container { position: fixed; width: 400px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; } .dialog-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; cursor: move; } .dialog-content { padding: 16px; } /style2. 实现基础拖拽指令现在我们来创建核心的拖拽指令。在src/directives目录下新建draggable.ts文件import { Directive } from vue interface DragState { startX: number startY: number startLeft: number startTop: number } const vDraggable: Directive { mounted(el: HTMLElement) { const header el.querySelector(.dialog-header) as HTMLElement if (!header) return let dragState: DragState | null null const handleMouseDown (e: MouseEvent) { // 只响应左键点击 if (e.button ! 0) return dragState { startX: e.clientX, startY: e.clientY, startLeft: el.offsetLeft, startTop: el.offsetTop } document.addEventListener(mousemove, handleMouseMove) document.addEventListener(mouseup, handleMouseUp) } const handleMouseMove (e: MouseEvent) { if (!dragState) return const dx e.clientX - dragState.startX const dy e.clientY - dragState.startY el.style.left ${dragState.startLeft dx}px el.style.top ${dragState.startTop dy}px } const handleMouseUp () { dragState null document.removeEventListener(mousemove, handleMouseMove) document.removeEventListener(mouseup, handleMouseUp) } header.addEventListener(mousedown, handleMouseDown) // 清理函数 el.__cleanupDraggable () { header.removeEventListener(mousedown, handleMouseDown) document.removeEventListener(mousemove, handleMouseMove) document.removeEventListener(mouseup, handleMouseUp) } }, unmounted(el) { // 清理事件监听 if (el.__cleanupDraggable) { el.__cleanupDraggable() } } } export default vDraggable这个基础实现已经能够满足简单的拖拽需求但它还有一些可以优化的地方没有边界检查弹窗可能会被拖出可视区域缺少拖拽时的视觉反馈没有考虑移动端触摸事件3. 增强拖拽指令功能让我们来增强这个指令的功能使其更加完善。以下是改进后的版本import { Directive } from vue interface DragState { startX: number startY: number startLeft: number startTop: number isDragging: boolean } const vDraggable: Directive { mounted(el: HTMLElement, binding) { const header el.querySelector(.dialog-header) as HTMLElement if (!header) return // 设置初始位置 el.style.position fixed if (!el.style.left !el.style.top) { el.style.left 50% el.style.top 50% el.style.transform translate(-50%, -50%) } let dragState: DragState | null null const handleMouseDown (e: MouseEvent) { if (e.button ! 0) return dragState { startX: e.clientX, startY: e.clientY, startLeft: parseInt(el.style.left) || 0, startTop: parseInt(el.style.top) || 0, isDragging: false } // 添加拖拽类名 el.classList.add(dragging) document.addEventListener(mousemove, handleMouseMove) document.addEventListener(mouseup, handleMouseUp, { once: true }) } const handleMouseMove (e: MouseEvent) { if (!dragState) return // 设置最小移动距离避免误触 if (!dragState.isDragging Math.abs(e.clientX - dragState.startX) 5 Math.abs(e.clientY - dragState.startY) 5) { return } dragState.isDragging true const dx e.clientX - dragState.startX const dy e.clientY - dragState.startY let newLeft dragState.startLeft dx let newTop dragState.startTop dy // 边界检查 newLeft Math.max(0, Math.min(newLeft, window.innerWidth - el.offsetWidth)) newTop Math.max(0, Math.min(newTop, window.innerHeight - el.offsetHeight)) el.style.left ${newLeft}px el.style.top ${newTop}px el.style.transform none } const handleMouseUp () { if (dragState?.isDragging) { e.preventDefault() // 防止触发点击事件 } cleanup() } const cleanup () { el.classList.remove(dragging) dragState null document.removeEventListener(mousemove, handleMouseMove) } header.addEventListener(mousedown, handleMouseDown) // 清理函数 el.__cleanupDraggable () { header.removeEventListener(mousedown, handleMouseDown) cleanup() } }, unmounted(el) { if (el.__cleanupDraggable) { el.__cleanupDraggable() } } } export default vDraggable对应的CSS可以添加一些拖拽时的视觉反馈.dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease; } .dragging .dialog-header { background-color: #f5f5f5; }4. 指令参数化与高级功能为了让我们的拖拽指令更加灵活我们可以通过指令的参数来配置不同的行为。修改指令定义使其支持以下参数interface DraggableOptions { handle?: string // 指定拖拽句柄选择器 bounds?: boolean | string // 边界限制 zIndex?: number // 拖拽时设置的z-index disabled?: boolean // 是否禁用拖拽 } const vDraggable: DirectiveHTMLElement, DraggableOptions | undefined { mounted(el, binding) { const options binding.value || {} const handleSelector options.handle || .dialog-header const handleEl el.querySelector(handleSelector) as HTMLElement if (!handleEl || options.disabled) return // 初始化位置 el.style.position fixed if (!el.style.left !el.style.top) { el.style.left 50% el.style.top 50% el.style.transform translate(-50%, -50%) } let dragState: DragState | null null let originalZIndex el.style.zIndex const handleMouseDown (e: MouseEvent) { if (e.button ! 0) return if (options.zIndex ! undefined) { el.style.zIndex options.zIndex.toString() } dragState { startX: e.clientX, startY: e.clientY, startLeft: parseInt(el.style.left) || 0, startTop: parseInt(el.style.top) || 0, isDragging: false } el.classList.add(dragging) document.addEventListener(mousemove, handleMouseMove) document.addEventListener(mouseup, handleMouseUp, { once: true }) } const handleMouseMove (e: MouseEvent) { if (!dragState) return if (!dragState.isDragging Math.abs(e.clientX - dragState.startX) 5 Math.abs(e.clientY - dragState.startY) 5) { return } dragState.isDragging true const dx e.clientX - dragState.startX const dy e.clientY - dragState.startY let newLeft dragState.startLeft dx let newTop dragState.startTop dy // 边界检查 if (options.bounds ! false) { const boundsEl typeof options.bounds string ? document.querySelector(options.bounds) : document.body if (boundsEl) { const boundsRect boundsEl.getBoundingClientRect() const elRect el.getBoundingClientRect() newLeft Math.max( boundsRect.left, Math.min( newLeft, boundsRect.left boundsRect.width - elRect.width ) ) newTop Math.max( boundsRect.top, Math.min( newTop, boundsRect.top boundsRect.height - elRect.height ) ) } } el.style.left ${newLeft}px el.style.top ${newTop}px el.style.transform none } const handleMouseUp () { if (dragState?.isDragging) { e.preventDefault() } cleanup() } const cleanup () { el.classList.remove(dragging) if (options.zIndex ! undefined) { el.style.zIndex originalZIndex } dragState null document.removeEventListener(mousemove, handleMouseMove) } handleEl.addEventListener(mousedown, handleMouseDown) // 清理函数 el.__cleanupDraggable () { handleEl.removeEventListener(mousedown, handleMouseDown) cleanup() } }, updated(el, binding) { // 如果disabled状态变化需要重新绑定/解绑事件 if (binding.oldValue?.disabled ! binding.value?.disabled) { const options binding.value || {} const handleSelector options.handle || .dialog-header const handleEl el.querySelector(handleSelector) as HTMLElement if (el.__cleanupDraggable) { el.__cleanupDraggable() } if (!options.disabled handleEl) { vDraggable.mounted(el, binding) } } }, unmounted(el) { if (el.__cleanupDraggable) { el.__cleanupDraggable() } } }现在我们可以这样使用增强后的指令template div v-draggable{ handle: .custom-handle, bounds: #app, zIndex: 1001 } classdialog-container div classcustom-handle h3可拖拽对话框/h3 /div div classdialog-content !-- 内容 -- /div /div /template5. 性能优化与最佳实践在实现拖拽功能时性能是一个重要考虑因素。以下是几个优化建议节流事件处理对于频繁触发的mousemove事件可以使用节流来减少处理频率const throttle (fn: Function, delay: number) { let lastCall 0 return function(...args: any[]) { const now Date.now() if (now - lastCall delay) return lastCall now return fn(...args) } } // 在指令中使用 const handleMouseMove throttle((e: MouseEvent) { // 处理逻辑 }, 16) // ~60fps使用CSS transform代替top/left现代浏览器对CSS transform的优化更好// 代替直接设置left/top el.style.transform translate(${newLeft}px, ${newTop}px)被动事件监听器对于不需要调用preventDefault()的事件可以标记为被动document.addEventListener(mousemove, handleMouseMove, { passive: true })避免强制同步布局在事件处理中避免连续读取和修改DOM属性移动端支持添加触摸事件处理const handleTouchStart (e: TouchEvent) { const touch e.touches[0] handleMouseDown(new MouseEvent(mousedown, { clientX: touch.clientX, clientY: touch.clientY })) } const handleTouchMove (e: TouchEvent) { const touch e.touches[0] handleMouseMove(new MouseEvent(mousemove, { clientX: touch.clientX, clientY: touch.clientY })) } // 添加触摸事件监听 handleEl.addEventListener(touchstart, handleTouchStart) document.addEventListener(touchmove, handleTouchMove)6. 与其他UI库的集成我们的拖拽指令可以很容易地与其他UI库集成。以下是与Element Plus对话框集成的示例template el-dialog v-modelvisible v-draggable title可拖拽对话框 width50% :modalfalse span这是一个可以拖拽的Element Plus对话框/span /el-dialog /template script setup langts import { ref } from vue const visible ref(true) /script style /* 覆盖Element Plus默认样式 */ .el-dialog { position: fixed; margin: 0 !important; } .el-dialog__header { cursor: move; } /style7. 测试与调试为了确保我们的拖拽指令在各种场景下都能正常工作我们需要进行全面的测试。以下是一些测试用例基础拖拽测试验证点击头部可以拖动对话框验证释放鼠标后对话框停留在正确位置边界条件测试验证对话框不会超出指定边界验证对话框在窗口resize后仍然保持正确位置性能测试在低端设备上测试拖拽流畅度同时打开多个可拖拽对话框测试性能移动端测试验证触摸拖拽功能测试在不同移动设备上的表现可以使用Vue Test Utils来编写单元测试import { mount } from vue/test-utils import { describe, it, expect } from vitest import vDraggable from /directives/draggable import DraggableDialog from /components/DraggableDialog.vue describe(Draggable Directive, () { it(should move dialog when dragged, async () { const wrapper mount(DraggableDialog, { global: { directives: { draggable: vDraggable } } }) const dialog wrapper.find(.dialog-container) const header wrapper.find(.dialog-header) // 初始位置 const initialLeft parseInt(dialog.element.style.left) const initialTop parseInt(dialog.element.style.top) // 模拟拖拽 await header.trigger(mousedown, { clientX: 0, clientY: 0 }) document.dispatchEvent(new MouseEvent(mousemove, { clientX: 100, clientY: 100 })) document.dispatchEvent(new MouseEvent(mouseup)) // 验证位置变化 expect(parseInt(dialog.element.style.left)).toBe(initialLeft 100) expect(parseInt(dialog.element.style.top)).toBe(initialTop 100) }) })8. 实际应用案例让我们看一个实际应用场景在一个任务管理应用中实现可拖拽的详情面板。template div classtask-manager div classtask-list div v-fortask in tasks :keytask.id classtask-item clickopenTaskDetail(task) {{ task.title }} /div /div div v-ifselectedTask v-draggable{ handle: .detail-header, zIndex: 100 } classtask-detail div classdetail-header h3{{ selectedTask.title }}/h3 button clickselectedTask null关闭/button /div div classdetail-content p{{ selectedTask.description }}/p p截止日期: {{ selectedTask.dueDate }}/p /div /div /div /template script setup langts import { ref } from vue interface Task { id: number title: string description: string dueDate: string } const tasks refTask[]([ { id: 1, title: 完成项目提案, description: 撰写并提交季度项目提案文档, dueDate: 2023-11-15 }, { id: 2, title: 团队会议, description: 每周团队进度同步会议, dueDate: 2023-11-10 } ]) const selectedTask refTask | null(null) const openTaskDetail (task: Task) { selectedTask.value task } /script style scoped .task-manager { display: flex; height: 100vh; } .task-list { width: 300px; padding: 16px; border-right: 1px solid #eee; } .task-item { padding: 8px; margin-bottom: 8px; background: #f5f5f5; cursor: pointer; } .task-detail { position: fixed; left: 350px; top: 50px; width: 400px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .detail-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; cursor: move; } .detail-content { padding: 16px; } /style在这个案例中用户可以点击任务列表中的项目右侧会弹出可拖拽的详情面板。用户可以自由拖动面板到合适的位置而不会影响其他操作。
