需求：vue專案 element 的 dialog 彈出視窗加上 最大化 還原 和自定義拖拽、拉伸彈窗
阿新 • • 發佈：2021-08-29
原理是 利用vue 的自定義指令功能 自定義一個指令；
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 = newFunction("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 = '<i class=' + (el.fullscreen ? '"el-icon-crop"' : '"el-icon-full-screen"') + ' onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="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'; 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 = '<i class="el-icon-full-screen"></i>'; 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; 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 = "100VH"; 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% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'; hasSetBodyHight = true; } } el.dispatchEvent(resizeEvent); } //點選放大縮小效果 maxMin.onclick = setMaxMin; //雙擊頭部效果 dialogHeaderEl.ondblclick = setMaxMin; //拉伸 let resizeEl = document.createElement("div"); dragDom.appendChild(resizeEl); //在彈窗右下角加上一個10-10px的控制塊 resizeEl.style.cursor = 'se-resize'; resizeEl.style.position = 'absolute'; resizeEl.style.height = '10px'; resizeEl.style.width = '10px'; resizeEl.style.right = '0px'; resizeEl.style.bottom = '0px'; //滑鼠拉伸彈窗 resizeEl.onmousedown = (e) => { // 記錄初始x位置 const clientX = e.clientX; // 滑鼠按下，計算當前元素距離可視區的距離 const disX = e.clientX - resizeEl.offsetLeft; const disY = e.clientY - resizeEl.offsetTop; document.onmousemove = function (e) { e.preventDefault(); // 移動時禁用預設事件 // 通過事件委託，計算移動的距離 const x = e.clientX - disX + (e.clientX - clientX);//這裡 由於elementUI的dialog控制居中的，所以水平拉伸效果是雙倍 const y = e.clientY - disY; //比較是否小於最小寬高 dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'; dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'; if (!hasSetBodyHight) { let footerHeight = dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight; dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'; hasSetBodyHight = true; } }; //拉伸結束 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; el.dispatchEvent(resizeEvent); }; } } }
使用 的時候 在main.js裡面全域性註冊
import elDragDialog from '@/directive/el-drag-dialog' // 引入移動事件（el-drag-dialog.js的內容為上面的程式碼塊） Vue.directive('el-drag-dialog', elDragDialog);//新增標籤事件繫結 可以放大移動彈窗 //彈窗預設點選遮罩改為不關閉 為了防止和拖拽衝突 ，這句需要放在use ElementUI之前（也可以不加這句，自己測試區別） ElementUI.Dialog.props.closeOnClickModal.default = false;
全域性註冊成功後在需要加上此事件的彈窗加上el-drag-dialog屬性即可
<el-dialog v-el-drag-dialog width="80%" :visible.sync="dialogFormVisible">
測試彈窗內容
</el-dialog>