elementui弹框拖拽和放大缩小 第一节

export default {     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 = '<i class="fa el-icon-full-screen" onm ouseOver="this.style.color=\'#409EFF\'" onm ouseOut="this.style.color=\'inherit\'"></i>';         dialogHeaderEl.insertBefore(maxMin,dialogHeaderEl.childNodes[1]);         let moveDown = (e) => {             // 鼠标按下，计算当前元素距离可视区的距离             const disX = e.clientX - dialogHeaderEl.offsetLeft;             const disY = e.clientY - dialogHeaderEl.offsetTop;             // 获取到的值带px 正则匹配替换             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);             } else {                 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;
                // 移动当前元素                 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';        

标签：el,const,elementui,弹框,dialogHeaderEl,let,maxMin,document,拖拽
来源： https://www.cnblogs.com/Mr-dongjuntao/p/16249356.html