怎么全局增加自定义指令？

Question

vue项目已经开发的差不多了，现在要给所有的对话框增加可拖动的自定义指令，该怎么做呢？

Answer 1

1. 全局替换 <el-dialog 替换成 <el-dialog v-自定义拖拽指令
2. 通过事件委托。直接给所有的 .el-dialog 增加一个拖动的功能。
3. 改 el-element 源码，默认支持拖拽。然后 alias 一下，指向新包。

以上三个方案应该都能实现想要的功能。

Answer 2

看了一下更新后的描述，并不一定使用指令的方式去做。可自己封装一个 dialog 组件，开放一个可拖动属性（比如说 draggable）。

具体实现可以参考 Element Plus 这个UI库的实现，具体源码位置 👉 element-plus/hooks/use-draggable at dev · element-plus、element-plus/dialog-content.vue at dev · element-plus。

当然如果你使用的是 Vue3，其实可以直接切换到 Element+ 这个UI库。