作者 RuoYi

自定义可拖动弹窗高度指令

  1 +/**
  2 +* v-dialogDragWidth 可拖动弹窗高度(右下角)
  3 +* Copyright (c) 2019 ruoyi
  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 +}
1 /** 1 /**
2 -* v-dialogDragWidth 可拖动弹窗宽度 2 +* v-dialogDragWidth 可拖动弹窗宽度(右侧边)
3 * Copyright (c) 2019 ruoyi 3 * Copyright (c) 2019 ruoyi
4 */ 4 */
5 5
@@ -24,8 +24,7 @@ export default { @@ -24,8 +24,7 @@ export default {
24 document.onmousemove = null; 24 document.onmousemove = null;
25 document.onmouseup = null; 25 document.onmouseup = null;
26 }; 26 };
27 - },  
28 - ); 27 + }, false);
29 dragDom.appendChild(lineEl); 28 dragDom.appendChild(lineEl);
30 } 29 }
31 } 30 }
@@ -2,12 +2,14 @@ import hasRole from './permission/hasRole' @@ -2,12 +2,14 @@ import hasRole from './permission/hasRole'
2 import hasPermi from './permission/hasPermi' 2 import hasPermi from './permission/hasPermi'
3 import dialogDrag from './dialog/drag' 3 import dialogDrag from './dialog/drag'
4 import dialogDragWidth from './dialog/dragWidth' 4 import dialogDragWidth from './dialog/dragWidth'
  5 +import dialogDragHeight from './dialog/dragHeight'
5 6
6 const install = function(Vue) { 7 const install = function(Vue) {
7 Vue.directive('hasRole', hasRole) 8 Vue.directive('hasRole', hasRole)
8 Vue.directive('hasPermi', hasPermi) 9 Vue.directive('hasPermi', hasPermi)
9 Vue.directive('dialogDrag', dialogDrag) 10 Vue.directive('dialogDrag', dialogDrag)
10 Vue.directive('dialogDragWidth', dialogDragWidth) 11 Vue.directive('dialogDragWidth', dialogDragWidth)
  12 + Vue.directive('dialogDragHeight', dialogDragHeight)
11 } 13 }
12 14
13 if (window.Vue) { 15 if (window.Vue) {