春风项目四线(合箱线、总装线)
wujian
2024-01-24 78830ddf56a41d16ab440a1ed3019ef77b3db4af
提交 | 用户 | 时间
fd2207 1 /**
2  * v-dialogDragWidth 可拖动弹窗宽度(右侧边)
3  */
4
5 export default {
6   bind(el) {
7     const dragDom = el.querySelector('.el-dialog');
8     const lineEl = document.createElement('div');
9     lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
10     lineEl.addEventListener('mousedown',
11       function (e) {
12         // 鼠标按下,计算当前元素距离可视区的距离
13         const disX = e.clientX - el.offsetLeft;
14         // 当前宽度
15         const curWidth = dragDom.offsetWidth;
16         document.onmousemove = function (e) {
17           e.preventDefault(); // 移动时禁用默认事件
18           // 通过事件委托,计算移动的距离
19           const l = e.clientX - disX;
20           dragDom.style.width = `${curWidth + l}px`;
21         };
22         document.onmouseup = function (e) {
23           document.onmousemove = null;
24           document.onmouseup = null;
25         };
26       }, false);
27     dragDom.appendChild(lineEl);
28   }
29 }