From 67e32dbff74528d5b12b51f2b67414ed96fa2433 Mon Sep 17 00:00:00 2001 From: xd <844539747@qq.com> Date: Wed, 31 Jul 2024 09:51:18 +0800 Subject: [PATCH] '123' --- ruoyi-ui/src/directive/dialog/dragDialog.js | 201 +++++++++----------- 1 file changed, 94 insertions(+), 107 deletions(-) diff --git a/ruoyi-ui/src/directive/dialog/dragDialog.js b/ruoyi-ui/src/directive/dialog/dragDialog.js index aef2197..e86f297 100644 --- a/ruoyi-ui/src/directive/dialog/dragDialog.js +++ b/ruoyi-ui/src/directive/dialog/dragDialog.js @@ -1,123 +1,110 @@ export default { - bind(el, binding, vnode, oldVnode) { - let resizeEvent = new CustomEvent('drag-resize',{detail:'尺寸变化',bubbles:false}); - //初始化不最大化 - el.fullscreen = false; - //弹框可拉伸最小宽高 - let minWidth = 400; - let minHeight = 300; - //当前宽高 - let nowWidth = minWidth; - let nowHight = minHeight; - //当前顶部高度 - let nowMarginTop = 0; - //获取弹框头部（这部分可双击全屏） - const dialogHeaderEl = el.querySelector('.el-dialog__header'); - let hasSetBodyHight = false; - //弹窗 - const dragDom = el.querySelector('.el-dialog'); - dragDom.className += ' el-drag-dialog'; - //清除选择头部文字效果 - dialogHeaderEl.onselectstart = new Function("return false"); - //头部加上可拖动cursor - dialogHeaderEl.style.cursor = 'move'; - - // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); - const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); - - //头部插入最大化最小化元素 - let maxMin = document.createElement("button"); - maxMin.className += ' el-dialog__headerbtn el-dialog__minmax'; - maxMin.style.right = '40px'; - maxMin.style.color = '#909399'; - maxMin.title = el.fullscreen ? '还原' : '最大化'; - maxMin.innerHTML = ''; - dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1]); + bind (el, binding, vnode, oldVnode) { + // 弹框可拉伸最小宽高 + // let minWidth = 400 + // let minHeight = 300 + // 初始非全屏 + let isFullScreen = false + // 当前宽高 + let nowWidth = 0 + let nowHight = 0 + // 当前顶部高度 + let nowMarginTop = 0 + // 获取弹框头部（这部分可双击全屏） + const dialogHeaderEl = el.querySelector('.el-dialog__header') + let hasSetBodyHight = false + // 弹窗 + const dragDom = el.querySelector('.el-dialog') + // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog； + // dragDom.style.overflow = "auto" + // 清除选择头部文字效果 + dialogHeaderEl.onselectstart = new Function('return false') + // 头部加上可拖动cursor + dialogHeaderEl.style.cursor = 'move' + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null) + const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) + // 头部插入最大化最小化元素 + let maxMin = document.createElement('button') + maxMin.className += ' el-dialog__headerbtn el-dialog__minmax' + maxMin.style.right = '40px' + maxMin.style.color = '#909399' + maxMin.title = '最大化' + maxMin.innerHTML = '' + dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1]) let moveDown = (e) => { // 鼠标按下，计算当前元素距离可视区的距离 - const disX = e.clientX - dialogHeaderEl.offsetLeft; - const disY = e.clientY - dialogHeaderEl.offsetTop; - + const disX = e.clientX - dialogHeaderEl.offsetLeft + const disY = e.clientY - dialogHeaderEl.offsetTop // 获取到的值带px 正则匹配替换 - let styL, styT; - + let styL, styT // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (sty.left.includes('%')) { - styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100); - styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); + styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) } else { - styL = +sty.left.replace(/\px/g, ''); - styT = +sty.top.replace(/\px/g, ''); + styL = +sty.left.replace(/\px/g, '') + styT = +sty.top.replace(/\px/g, '') } - ; - document.onmousemove = function (e) { // 通过事件委托，计算移动的距离 - const l = e.clientX - disX; - const t = e.clientY - disY; - + const l = e.clientX - disX + const t = e.clientY - disY // 移动当前元素 - dragDom.style.left = `${l + styL}px`; - dragDom.style.top = `${t + styT}px`; - - //将此时的位置传出去 - //binding.value({x:e.pageX,y:e.pageY}) - }; - - document.onmouseup = function (e) { - document.onmousemove = null; - document.onmouseup = null; - }; - } - dialogHeaderEl.onmousedown = moveDown; - let bodyHeight = 'auto'; - - function setMaxMin() { - if (el.fullscreen) { - let i = maxMin.querySelector('.el-icon-crop'); - i.classList.remove('el-icon-crop'); - i.classList.add('el-icon-full-screen'); - maxMin.innerHTML = ''; - maxMin.title = '最大化'; - dragDom.style.height = "auto"; - dragDom.style.width = nowWidth + 'px'; - dragDom.style.marginTop = nowMarginTop; - el.fullscreen = false; - dialogHeaderEl.style.cursor = 'move'; - dialogHeaderEl.onmousedown = moveDown; - dragDom.querySelector('.el-dialog__body').style.height = bodyHeight; - dragDom.querySelector('.el-dialog__body').style.maxHeight = dragDom.style.height - hasSetBodyHight = false; - } else { - let i = maxMin.querySelector('.el-icon-full-screen'); - i.classList.remove('el-icon-full-screen'); - i.classList.add('el-icon-crop'); - maxMin.title = '还原'; - bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px'; - nowHight = dragDom.clientHeight; - nowWidth = dragDom.clientWidth; - nowMarginTop = dragDom.style.marginTop; - dragDom.style.left = 0; - dragDom.style.top = 0; - dragDom.style.height = "94VH"; - dragDom.style.width = "100VW"; - dragDom.style.marginTop = 0; - el.fullscreen = true; - dialogHeaderEl.style.cursor = 'initial'; - dialogHeaderEl.onmousedown = null; - if (!hasSetBodyHight) { - let footerHeight = dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight; - dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - 110px)'; - dragDom.querySelector('.el-dialog__body').style.maxHeight = dragDom.style.height - hasSetBodyHight = true; - } + dragDom.style.left = `${l + styL}px` + dragDom.style.top = `${t + styT}px` + // 将此时的位置传出去 + // binding.value({x:e.pageX,y:e.pageY}) + } + document.onmouseup = function (e) { + document.onmousemove = null + document.onmouseup = null } - el.dispatchEvent(resizeEvent); } + dialogHeaderEl.onmousedown = moveDown + let bodyHeight = 'auto' - //点击放大缩小效果 - maxMin.onclick = setMaxMin; - //双击头部效果 - dialogHeaderEl.ondblclick = setMaxMin; + function setMaxMin () { + if (isFullScreen == false) { + let i = maxMin.querySelector('.el-icon-full-screen') + i.classList.remove('el-icon-full-screen') + i.classList.add('el-icon-crop') + maxMin.title = '还原' + bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px' + nowHight = dragDom.clientHeight + nowWidth = dragDom.clientWidth + nowMarginTop = dragDom.style.marginTop + dragDom.style.left = 0 + dragDom.style.top = 0 + dragDom.style.height = '94VH' + dragDom.style.width = '100VW' + dragDom.style.marginTop = 0 + isFullScreen = true + dialogHeaderEl.style.cursor = 'initial' + dialogHeaderEl.onmousedown = null + if (!hasSetBodyHight) { + dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - 130px)' + dragDom.querySelector('.el-dialog__body').style.maxHeight = dragDom.style.height + hasSetBodyHight = true + } + } else { + let i = maxMin.querySelector('.el-icon-crop') + i.classList.remove('el-icon-crop') + i.classList.add('el-icon-full-screen') + maxMin.innerHTML = '' + maxMin.title = '最大化' + dragDom.style.height = 'auto' + dragDom.style.width = nowWidth + 'px' + dragDom.style.marginTop = nowMarginTop + isFullScreen = false + dialogHeaderEl.style.cursor = 'move' + dialogHeaderEl.onmousedown = moveDown + dragDom.querySelector('.el-dialog__body').style.height = bodyHeight + hasSetBodyHight = false + } + } + // 点击放大缩小效果 + maxMin.onclick = setMaxMin + // 双击头部效果 + dialogHeaderEl.ondblclick = setMaxMin } }