| 提交 | 用户 | 时间 | ||
| 0ca254 | 1 | /** |
| A | 2 | * v-dialogDragWidth 可拖动弹窗高度（右下角） |
| 3 | * Copyright (c) 2019 jcdm | |
| 4 | */ | |
| 5 | ||
| 6 | export default { | |
| 7 | bind(el) { | |
| 8 | const dragDom = el.querySelector('.el-dialog'); | |
| 9 | const lineEl = document.createElement('div'); | |
| 10 | lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;'; | |
| 11 | lineEl.addEventListener('mousedown', | |
| 12 | function(e) { | |
| 13 | // 鼠标按下，计算当前元素距离可视区的距离 | |
| 14 | const disX = e.clientX - el.offsetLeft; | |
| 15 | const disY = e.clientY - el.offsetTop; | |
| 16 | // 当前宽度 高度 | |
| 17 | const curWidth = dragDom.offsetWidth; | |
| 18 | const curHeight = dragDom.offsetHeight; | |
| 19 | document.onmousemove = function(e) { | |
| 20 | e.preventDefault(); // 移动时禁用默认事件 | |
| 21 | // 通过事件委托，计算移动的距离 | |
| 22 | const xl = e.clientX - disX; | |
| 23 | const yl = e.clientY - disY | |
| 24 | dragDom.style.width = `${curWidth + xl}px`; | |
| 25 | dragDom.style.height = `${curHeight + yl}px`; | |
| 26 | }; | |
| 27 | document.onmouseup = function(e) { | |
| 28 | document.onmousemove = null; | |
| 29 | document.onmouseup = null; | |
| 30 | }; | |
| 31 | }, false); | |
| 32 | dragDom.appendChild(lineEl); | |
| 33 | } | |
| 34 | } | |
