dragHeight.js 1.4 KB

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