弹窗拖拽自定义directive

 1 import Vue from 'vue';
 2 
 3 // v-dialogDrag 弹窗拖拽
 4 Vue.directive('dialogDrag', {
 5   bind(el, binding, vnode, oldVnode) {
 6     const dialogHeaderEl = el.querySelector('.el-dialog__header');
 7     const dragDom = el.querySelector('.el-dialog');
 8     dialogHeaderEl.style.cursor = 'move';
 9     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
10     const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
11 
12     dialogHeaderEl.onmousedown = (e) => {
13       // 鼠标按下，计算当前元素距离可视区的距离
14       const disX = e.clientX - dialogHeaderEl.offsetLeft;
15       const disY = e.clientY - dialogHeaderEl.offsetTop;
16       // 获取到的值带px 正则匹配替换
17       let styL; let
18         styT;
19       // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
20       if (sty.left.includes('%')) {
21         styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
22         styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
23       } else {
24         styL = +sty.left.replace(/\px/g, '');
25         styT = +sty.top.replace(/\px/g, '');
26       }
27       document.onmousemove = function(e) {
28         // 通过事件委托，计算移动距离
29         const l = e.clientX - disX;
30         const t = e.clientY - disY;
31 
32         // 移动当前元素
33         dragDom.style.left = `${l + styL}px`;
34         dragDom.style.top = `${t + styT}px`;
35       };
36       document.onmouseup = function(e) {
37         document.onmousemove = null;
38         document.onmouseup = null;
39       };
40     };
41   }
42 });

使用：

标签：el,const,自定义,directive,px,dialogHeaderEl,document,sty,弹窗
来源： https://www.cnblogs.com/guwufeiyang/p/13229725.html