如何通过Vue3自定义指令实现Element UI组件的扩展功能？

本文共计1777个文字，预计阅读时间需要8分钟。

目录 + 实现el-dialog的拖拽功能 + 通过自定义指令实现拖拽功能 + 实现拖拽功能 + 使用方式 + 实现el-dialog的拖拽功能 + 这里的指的是 element-plus 的 el-dialog 组件，一开始该组件并未实现拖拽功能

目录

• 实现el-dialog的拖拽功能
• 通过自定义指令实现拖拽功能
• 实现拖拽功能
• 使用方式

实现el-dialog的拖拽功能

这里指的是 element-plus 的el-dialog组件，一开始该组件并没有实现拖拽的功能，当然现在可以通过设置属性的方式实现拖拽。

自带的拖拽功能非常严谨，拖拽时判断是否拖拽出窗口，如果出去了会阻止拖拽。

如果自带的拖拽功能可以满足需求的话，可以跳过本文。

通过自定义指令实现拖拽功能

因为要自己操作dom（设置事件），所以感觉还是使用自定义指令更直接一些，而且对原生组件的影响更小。