vue自定义全局指令实现拖拽弹窗等元素

全局注册指令

注意:bind是vue2的自定义指令事件,如果你在vue3中使用请把bind改为beforeMount,附上vue2指令的生命周期函数和vue3的对比。

vue2vue3备注
bindbeforeMount指令绑定到元素后执行。只执行一次。
insertedmounted元素插入父 DOM 后执行
-beforeUpdate元素本身更新之前执行
componentUpdatedupdated组件和子级更新后执行
-beforeUnmount卸载元素之前执行
unbindunmounted指令被移除,就会执行,也只执行一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Vue.directive('move', {
bind(el) {

let moveElement = el.firstElementChild;
el.mouseDown = (e) => {

// X,Y为计算的偏移量,就是鼠标点击的位置相对于元素左上角圆点的距离
let X = e.clientX - el.offsetLeft;
let Y = e.clientY - el.offsetTop;
const move = (e) => {
// 0 < left && left < window.innerWidth - el.offsetWidth 保证移动过程中,元素不超出窗口
let left = e.clientX - X;
if (0 < left && left < window.innerWidth - el.offsetWidth) {
el.style.left = left + 'px';
}
// console.log(left, window.innerWidth, el.offsetWidth)

// 0 < top && top < window.innerHeight - el.offsetHeight 保证移动过程中,元素不超出窗口
let top = e.clientY - Y;
if (0 < top && top < window.innerHeight - el.offsetHeight) {
el.style.top = top + 'px';
}
// console.log(top, window.innerHeight, el.offsetHeight)
}
document.addEventListener('mousemove', move)
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', move)
})
}
moveElement.addEventListener('mousedown', el.mouseDown);
}
})

使用

1
<div v-move> </div>

优化空间

指令来源于互联网,感觉还有优化的空间,例如
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/
作者
Xi Yu
发布于
2022年12月30日
许可协议