ElementUI 自帶的對話框組件(el-dialog)沒有拖動和最小化的處理，目前業務遇到呼叫彈屏處理，基于el-dialog 再次進行封裝下，上篇文章有人說圖片換成代碼就好了，下面代碼部分我就直接放代碼了，不再用圖片處理了。

先看看效果吧

效果gif

下面拆分說明(拖動，全屏，縮放，關閉)

拖拽屬性

注冊dialogDrag的指令，這樣就可以在拖拽彈框的地方直接用v-dialogDrag

這部分代碼我借鑒別人寫的，主要原理是獲取dom節點，根據鼠標按下移動和放開的事件，以當前窗口為基進行位置改變移動。

// v-dialogDrag: 彈窗拖拽屬性Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); dialogHeaderEl.style.cssText += ';cursor:move;' dragDom.style.cssText += ';top:0px;' // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = (() => { if (window.document.currentStyle) { return (dom, attr) => dom.currentStyle[attr]; } else { return (dom, attr) => getComputedStyle(dom, false)[attr]; } })() dialogHeaderEl.onmousedown = (e) => { // 鼠標按下，計算當前元素距離可視區的距離 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; const screenWidth = document.body.clientWidth; // body當前寬度 const screenHeight = document.documentElement.clientHeight; // 可見區域高度(應為body高度，可某些環境下無法獲取) const dragDomWidth = dragDom.offsetWidth; // 對話框寬度 const dragDomheight = dragDom.offsetHeight; // 對話框高度 const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // 獲取到的值帶px 正則匹配替換 let styL = sty(dragDom, 'left'); let styT = sty(dragDom, 'top'); // 注意在ie中 第一次獲取到的值為組件自帶50% 移動之后賦值為px if (styL.includes('%')) { styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100); styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100); } else { styL = +styL.replace(/px/g, ''); styT = +styT.replace(/px/g, ''); }; document.onmousemove = (e) => { // 通過事件委托，計算移動的距離 let left = e.clientX - disX; let top = e.clientY - disY; // 邊界處理 if (-(left) > minDragDomLeft) { left = -(minDragDomLeft); } else if (left > maxDragDomLeft) { left = maxDragDomLeft; } if (-(top) > minDragDomTop) { top = -(minDragDomTop); } else if (top > maxDragDomTop) { top = maxDragDomTop; } // 移動當前元素 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; } }})

操作按鈕(全屏，最小化，關閉)

首先去掉默認的關閉圖標 show-close=“false",然后在title 的插槽中，放入我們需要的操作按鈕或者圖標，具體排列樣式用css 控制就好了。

相關代碼區域

事件處理

我們在處理這個的時候不可避免的遇到了需要更改props屬性的問題，我們知道vue中默認的組件中是不能修改props 屬性的,如果非要改當然也有別的辦法。

第一種方法就是 data 中重新定義一個變量初始用props 傳入的值

第二種方法就是 用computed計算屬性

第三種方法就是 $emit 觸發事件，父組件去處理事件

第四種方法就是 用.sync修飾符 ，本文用到的是這種方法

具體怎么用.sync 修飾符呢，看下面這個小例子

// 父組件// 子組件

其他彈窗事件正常$emit 拋出就可以了

組件封裝代碼

{{ title }} {{minContent}}

組件調用

打開彈框

這是彈框內容區域

事件及屬性說明

除了特殊的支持 element dialog 的全部屬性，也就是文檔上的屬性都可以用

type： 默認是彈框，如果要最小化的顯示就指名不需要就不用傳遞這個參數

fullscreen.sync： 如果需要自定義動態設置全屏，記得綁定.sync 修飾符

element-ui dialog 文檔

總結

以上就是對彈窗組件的封裝代碼也都在上面了，總的來說業務開發的時候，有輪子最好可以直接用，沒有還是需要造造，如果上面寫的有問題或多那一部分不理解的，歡迎下面討論，我們一起學習一起進步。

總結

以上是生活随笔為你收集整理的element label动态赋值_基于Element封装可拖动放大缩小的弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。