diff --git a/ruoyi-ui/src/directive/dialog/dragHeight.js b/ruoyi-ui/src/directive/dialog/dragHeight.js new file mode 100644 index 00000000..db5e1dbc --- /dev/null +++ b/ruoyi-ui/src/directive/dialog/dragHeight.js @@ -0,0 +1,34 @@ +/** +* v-dialogDragWidth 可拖动弹窗高度(右下角) +* Copyright (c) 2019 ruoyi +*/ + +export default { + bind(el) { + const dragDom = el.querySelector('.el-dialog'); + const lineEl = document.createElement('div'); + lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;'; + lineEl.addEventListener('mousedown', + function(e) { + // 鼠标按下,计算当前元素距离可视区的距离 + const disX = e.clientX - el.offsetLeft; + const disY = e.clientY - el.offsetTop; + // 当前宽度 高度 + const curWidth = dragDom.offsetWidth; + const curHeight = dragDom.offsetHeight; + document.onmousemove = function(e) { + e.preventDefault(); // 移动时禁用默认事件 + // 通过事件委托,计算移动的距离 + const xl = e.clientX - disX; + const yl = e.clientY - disY + dragDom.style.width = `${curWidth + xl}px`; + dragDom.style.height = `${curHeight + yl}px`; + }; + document.onmouseup = function(e) { + document.onmousemove = null; + document.onmouseup = null; + }; + }, false); + dragDom.appendChild(lineEl); + } +} \ No newline at end of file diff --git a/ruoyi-ui/src/directive/dialog/dragWidth.js b/ruoyi-ui/src/directive/dialog/dragWidth.js index 4ed7f234..e3b5f3f8 100644 --- a/ruoyi-ui/src/directive/dialog/dragWidth.js +++ b/ruoyi-ui/src/directive/dialog/dragWidth.js @@ -1,5 +1,5 @@ /** -* v-dialogDragWidth 可拖动弹窗宽度 +* v-dialogDragWidth 可拖动弹窗宽度(右侧边) * Copyright (c) 2019 ruoyi */ @@ -24,8 +24,7 @@ export default { document.onmousemove = null; document.onmouseup = null; }; - }, - ); + }, false); dragDom.appendChild(lineEl); } } \ No newline at end of file diff --git a/ruoyi-ui/src/directive/index.js b/ruoyi-ui/src/directive/index.js index 9bedc8a1..030fd4fe 100644 --- a/ruoyi-ui/src/directive/index.js +++ b/ruoyi-ui/src/directive/index.js @@ -2,12 +2,14 @@ import hasRole from './permission/hasRole' import hasPermi from './permission/hasPermi' import dialogDrag from './dialog/drag' import dialogDragWidth from './dialog/dragWidth' +import dialogDragHeight from './dialog/dragHeight' const install = function(Vue) { Vue.directive('hasRole', hasRole) Vue.directive('hasPermi', hasPermi) Vue.directive('dialogDrag', dialogDrag) Vue.directive('dialogDragWidth', dialogDragWidth) + Vue.directive('dialogDragHeight', dialogDragHeight) } if (window.Vue) {