Vue+Element-UI可拖拽Dialog实现
Vue 的自定义指令配合 Element-ui 的 Dialog，能搞出蛮灵活的拖放组件。用指令的方式去扩展功能，比起每次都去改 Dialog 源码要省心多了。关键就是那个自定义的 v-drag 指令，直接把拖动逻辑封装进去了，Dialog 想动哪就动哪，响应也快，体验挺顺滑的。
指令注册在 drag.js 里，用了 bind、update、unbind 三个生命周期钩子。核心逻辑是在 bind 里监听鼠标事件，通过 transform 实现移动效果。比起操作 top/left 来得轻巧，性能也稳。
还封装了一个组件 DraggableDialog.vue，直接套在 Element-ui 的 Dialog 外面，再加个 v-drag 指令。你只要像平时用 Dialog 一样用这个组件，拖动功能就自动搞定，基本没啥学习成本。
哦对了，别忘了 props 和事件要都透传，不然 Dialog 原有功能用不了。拖动只是加分项，核心功能还是要保持原汁原味。
如果你在做 Vue 的后台系统，或者需要那种弹出窗口能拖着走的体验，这套组合挺实用的，封装一次，到处用。
文件大小：767B
评论区