| 提交 | 用户 | 时间 | ||
| 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 | } | |
