春风项目四线(合箱线、总装线)
2
cl
2024-01-13 c2272a6fd7d8a6142bc9b0b1bdb4c715c66a865c
提交 | 用户 | 时间
fd2207 1 import Vue from 'vue'
2
3 // v-dialogpop-up: 弹窗拖拽
4 Vue.directive('dialogpop-up', {
5   bind(el, binding, vnode, oldVnode) {
6     const dialogHeaderEl = el.querySelector('.el-dialog__header')//el-dialog和header之间是两个下划线
7     const dragDom = el.querySelector('.el-dialog')
8     dialogHeaderEl.style.cursor = 'move'
9
10     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
11     const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
12
13     dialogHeaderEl.onmousedown = (e) => {
14       // 鼠标按下,计算当前元素距离可视区的距离
15       const disX = e.clientX - dialogHeaderEl.offsetLeft
16       const disY = e.clientY - dialogHeaderEl.offsetTop
17
18       // 获取到的值带px 正则匹配替换
19       let styL, styT
20
21       // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
22       if (sty.left.includes('%')) {
23         styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
24         styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
25       } else {
26         styL = +sty.left.replace(/\px/g, '')
27         styT = +sty.top.replace(/\px/g, '')
28       }
29
30       document.onmousemove = function(e) {
31         // 通过事件委托,计算移动的距离
32         const l = e.clientX - disX
33         const t = e.clientY - disY
34
35         // 移动当前元素
36         dragDom.style.left = `${l + styL}px`
37         dragDom.style.top = `${t + styT}px`
38
39         // 将此时的位置传出去
40         // binding.value({x:e.pageX,y:e.pageY})
41       }
42
43       document.onmouseup = function(e) {
44         document.onmousemove = null
45         document.onmouseup = null
46       }
47     }
48   }
49 })
50
51 // v-dialogDragWidth: 弹窗宽度拖大 拖小
52 Vue.directive('dialogDragWidth', {
53   bind(el, binding, vnode, oldVnode) {
54     const dragDom = binding.value.$el.querySelector('.el-dialog')
55
56     el.onmousedown = (e) => {
57       // 鼠标按下,计算当前元素距离可视区的距离
58       const disX = e.clientX - el.offsetLeft
59
60       document.onmousemove = function(e) {
61         e.preventDefault() // 移动时禁用默认事件
62
63         // 通过事件委托,计算移动的距离
64         const l = e.clientX - disX
65         dragDom.style.width = `${l}px`
66       }
67
68       document.onmouseup = function(e) {
69         document.onmousemove = null
70         document.onmouseup = null
71       }
72     }
73   }
74 })