基于element-ui el-dialog组件封装，可缩放+可移动的弹窗组件（源码）

/** @author: kzy; */ import Vue from 'vue' Vue.directive("SkDialogDrag", { bind(el, binding, vnode, oldVnode) { let windowW = document.body.clientWidth; let windowH = document.body.clientHeight //全屏标识 var fullscreen = false; //设置弹框可拉伸最小宽高 let minWidth = 400; let minHeight = 300; const dialogHeaderEl = el.querySelector(".el-dialog__header"); //弹窗 const dragDom = el.querySelector(".el-dialog"); dialogHeaderEl.onmouseenter = function(e){ fullscreen = (windowW == dragDom.offsetWidth && windowH == dragDom.offsetHeight) windowW = document.body.clientWidth; windowH = document.body.clientHeight if (fullscreen){ //头部加上可拖动cursor dialogHeaderEl.style.cursor = null; } if (!fullscreen){ //头部加上可拖动cursor dialogHeaderEl.style.cursor = "move"; } } // 获取style属性 let sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); let moveDown = e => { // 鼠标按下，计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disR = windowW - disX; const disY = e.clientY - dialogHeaderEl.offsetTop; const disB = windowH - disY //-dragDom.clientHeight + dialogHeaderEl.clientHeight; // console.log(disB - (dragDom.clientHeight -dialogHeaderEl.clientHeight)) // 获取到的值带px 正则匹配替换 let styL, styT,styR, styB, styMT, styML, styMR, styMB; // 注意在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); styR = +document.body.clientHeight * (+sty.right.replace(/\%/g, "") / 100); styB = +document.body.clientHeight * (+sty.bottom.replace(/\%/g, "") / 100); } else { styL = +sty.left.replace(/\px/g, ""); styT = +sty.top.replace(/\px/g, ""); styR = +sty.right.replace(/\px/g, ""); styB = +sty.bottom.replace(/\px/g, ""); styMT = +sty.marginTop.replace(/\px/g, "") //初始化左边框距浏览器最左侧距离 marginLeft 第一次加载为0 styML = +(sty.marginLeft.replace(/\px/g, "") == 0 ? (document.body.clientWidth - sty.width.replace(/\px/g, ""))/2 : sty.marginLeft.replace(/\px/g, "")); styMR = +(sty.marginRight.replace(/\px/g, "") == 0 ? (document.body.clientWidth - sty.width.replace(/\px/g, ""))/2 : sty.marginRight.replace(/\px/g, "")); // styMR = +sty.marginRight.replace(/\px/g, "") styMB = +(document.body.clientHeight - styT - sty.height.replace(/\px/g, "")) // styMB = +sty.marginBottom.replace(/\px/g, "") } // if (!fullscreen){ let onmousemove = e => { const titleH = dialogHeaderEl.offsetHeight; const dragDomH = dragDom.offsetHeight; const titleW = dialogHeaderEl.offsetWidth; // 通过事件委托，计算移动的距离 let l = e.clientX - disX; let t = e.clientY - disY; let r = windowW - e.clientX - disR; let b = windowH - e.clientY - disB; // 移动边界处理 上 if (t < 0 && (t + styMT + styT) <= 0 || t < 0 && (styMT + styT) <= 0) { t = -(styMT + styT); } else if (t > 0 && t > (document.body.clientHeight - styMT - styT - titleH)) { t = document.body.clientHeight - styMT - styT - titleH; } // // 移动边界处理 下 // if (b < 0 && (b + styMB + styB) <= 0 || b < 0 && (styMB + styB) <= 0) { // b = -(styMB + styB); // } else if (b > 0 && b > (document.body.clientHeight - styMB - styB - dragDomH)) { // b = document.body.clientHeight - styMB - styB - dragDomH; // } // 移动边界处理 左 if (l < 0 && (l + styML + styL) <= 0 || l < 0 && (styML + styL) <= 0) { l = -(styML + styL); } else if (l > 0 && l > (document.body.clientWidth - styML - styL - titleW)) { l = document.body.clientWidth - styML - styL - titleW; } // 移动边界处理 右 if (r < 0 && (r + styMR + styR) <= 0 || r < 0 && (styMR + styR) <= 0) { r = -(styMR + styR); } else if (r > 0 && r > (document.body.clientWidth + styMR + styR + titleW)) { r = document.body.clientWidth - styMR - styR - titleW; } // 移动当前元素 dragDom.style.left = `${l + styL}px`; dragDom.style.top = `${t + styT}px`; dragDom.style.right = `${r + styR}px`; // dragDom.style.bottom = `${b + styB}px`; }; // } if (!fullscreen){ document.onmousemove = onmousemove } document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; }; dialogHeaderEl.onmousedown = moveDown; dragDom.onmousemove = function (e) { const dialogBODY = el.querySelector(".el-dialog__body"); //调节字体的具名插槽 // const slotB = el.querySelector(".slotB"); // const slotA = el.querySelector(".slotA"); const resizeDom= el.querySelector(".resize"); const titleH = dialogHeaderEl.offsetHeight; dragDom.onmousedown = e => { const clientX = e.clientX; const clientY = e.clientY; let elW = dragDom.clientWidth; let elH = dragDom.clientHeight; let EloffsetLeft = dragDom.offsetLeft; let EloffsetTop = dragDom.offsetTop; // dragDom.style.userSelect = "auto"; let ELscrollTop = el.scrollTop; let resizeW = resizeDom.clientWidth, resizeH = resizeDom.clientHeight; //判断点击的位置是不是为头部 // if ( // ((clientX > EloffsetLeft && // clientX < EloffsetLeft + (slotB == null ? 0 : slotB.offsetLeft)) || //字体调节框左 // (clientX > EloffsetLeft + (slotB == null ? 0 : (slotB.offsetLeft + slotB.clientWidth)) && //字体调节框右 // clientX < EloffsetLeft + elW) )&& // clientY > EloffsetTop && // clientY < EloffsetTop + titleH // ) if ( clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + titleH ){ //如果是头部 e.preventDefault(); // 移动时禁用默认事件 } else { document.onmousemove = function (e) { //鼠标拖拽 if ( clientX > EloffsetLeft + elW - resizeW && clientX < EloffsetLeft + elW ) { //往左拖拽 if (clientX > e.clientX) { if (dragDom.clientWidth < minWidth) { } else { dragDom.style.width = elW - (clientX - e.clientX) * 2 + "px"; } } //往右拖拽 if (clientX <= e.clientX) { let targetTW = elW + (e.clientX - clientX) * 2 targetTW > windowW ? dragDom.style.width = windowW + "px" : dragDom.style.width = targetTW + "px" } } //底部鼠标拖拽位置 if ( ELscrollTop + clientY > EloffsetTop + elH - resizeH && ELscrollTop + clientY < EloffsetTop + elH ) { //往上拖拽 if (clientY > e.clientY) { if (dragDom.clientHeight < minHeight) { } else { dragDom.style.height = elH - (clientY - e.clientY) * 1 + "px"; dialogBODY.style.height = elH - (clientY - e.clientY) * 1 - titleH + "px"; }