正在显示
3 个修改的文件
包含
38 行增加
和
3 行删除
ruoyi-ui/src/directive/dialog/dragHeight.js
0 → 100644
| 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) { |
-
请 注册 或 登录 后发表评论