vue自定义全局指令实现拖拽弹窗等元素
全局注册指令
注意:bind是vue2的自定义指令事件,如果你在vue3中使用请把bind改为beforeMount,附上vue2指令的生命周期函数和vue3的对比。
vue2 | vue3 | 备注 |
---|---|---|
bind | beforeMount | 指令绑定到元素后执行。只执行一次。 |
inserted | mounted | 元素插入父 DOM 后执行 |
- | beforeUpdate | 元素本身更新之前执行 |
componentUpdated | updated | 组件和子级更新后执行 |
- | beforeUnmount | 卸载元素之前执行 |
unbind | unmounted | 指令被移除,就会执行,也只执行一次 |
1 |
|
使用
1 |
|
优化空间
指令来源于互联网,感觉还有优化的空间,例如
1.目前是默认指定元素的第一个子元素为绑定拖拽事件的元素,一般为弹窗的title区。可以再加一个参数v-mode=”#title”来自定义绑定拖拽事件的元素。
2.目前弹窗关闭后再次打开,上次拖拽添加的”top”和”left”还在,会导致弹窗不能恢复到默认位置,只能在弹窗关闭的事件里再额外执行this.$refs[“绑定指令的弹窗元素”].style.cssText = ‘display: none;’,使用起来比较麻烦,最好能在指令里能监听元素状态是否为’display: none;’,如果是none隐藏状态,就删除元素style中的”top”和”left”
vue自定义全局指令实现拖拽弹窗等元素
https://xiyu.pro/2022/12/30/21/