參考了簡書的部分資料總結下來的，可以解決 el-dialog窗口的移動，及拉伸、雙擊全屏，等問題；
話不多說直接上代碼。
在main.js同級新建一個 directives.js 文件，將下面代碼拷貝進去
// main.js import './directives'
最後在我們需要拖拽的彈窗上面加上命令 v-dialogDrag 就可以啦；
// call.center.detail.vue <rrc-dialog> ... /<rrc-dialog>
import Vue from 'vue'; /* * 使用方法 * 將以下代碼複製到一個js文件中，然後在入口文件main.js中import引入即可； * 給elementUI的dialog上加上 v-dialogDrag 指令就可以實現彈窗的全屏和拉伸了。 * 給dialog設置 :close-on-click-modal="false" , 禁止點擊遮罩層關閉彈出層 * 如果是form表單，不要將提交等按鈕放置el-form-item，以免在上下拉伸時被隱藏 */ // v-dialogDrag: 彈窗拖拽+水平方向伸縮 Vue.directive('dialogDrag', { 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'); //彈窗 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 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; //雙擊頭部全屏效果 dialogHeaderEl.ondblclick = (e) => { if (isFullScreen == false) { 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; isFullScreen = true; dialogHeaderEl.style.cursor = 'initial'; dialogHeaderEl.onmousedown = null; } else { dragDom.style.height = "auto"; dragDom.style.width = nowWidth + 'px'; dragDom.style.marginTop = nowMarginTop; isFullScreen = false; dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.onmousedown = moveDown; } } dragDom.onmousemove = function (e) { let moveE = e; if (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) { dragDom.style.cursor = 'w-resize'; } else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) { dragDom.style.cursor = 's-resize'; } else { dragDom.style.cursor = 'default'; dragDom.onmousedown = null; } 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 = 'none'; let ELscrollTop = el.scrollTop; //判斷點擊的位置是不是為頭部 if (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) { //如果是頭部在此就不做任何動作，以上有綁定dialogHeaderEl.onmousedown = moveDown; }else{ document.onmousemove = function (e) { e.preventDefault(); // 移動時禁用默認事件 //左側鼠標拖拽位置 if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) { //往左拖拽 if (clientX > e.clientX) { dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'; } //往右拖拽 if (clientX < e.clientX) { if(dragDom.clientWidth < minWidth){ }else{ dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'; } } } //右側鼠標拖拽位置 if (clientX > EloffsetLeft + elW - 10 && 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) { dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'; } } //底部鼠標拖拽位置 if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) { //往上拖拽 if (clientY > e.clientY) { if (dragDom.clientHeight < minHeight) { } else { dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'; } } //往下拖拽 if (clientY < e.clientY) { dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px'; } } }; //拉伸結束 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } } } })
閱讀更多 最愛甜蜜粉 的文章
