封裝element彈窗類組件z-index覆蓋問題,使用的popup的問題
工作需要封裝消息彈窗組件,但是樣式需要改動,所以我就復制了element組件中message-box的源碼自己修改了一番,在main.js中
Vue.prototype.$confirm = MessageBox.confirm;
把confirm 覆蓋掉
但是在實際使用當中,消息彈窗卻在dialog下面
看元素的zindex的時候發現elment每次顯隱一次彈窗類組件的時候它們的z-index就會累加,並且所有組件間這個zindex的值是公用的,也就是說每次后彈出的彈框永遠都會比先彈出的zindex值大
這時候就需要看看代碼了
源碼中message-box混入了Popup
在Popup中我們找到了PopupManager對象
PopupManager對象中存放着修改zindex的一系列方法,咱們可以看到如果沒有設置初始值或者不是已經設置過值的時候都會取2000這個值
設置下一個彈窗的zindex+1
因為所有組件引用的都是同一個PopupManager,所以會記錄每個組件彈窗的zindex
這時候再看我們的項目,dialog和我自己封裝的彈窗confirm 初始值都是2000,每次彈出都是各自+1並且互不干擾
其實問題是路徑,源碼中引用是src,
但是我們項目中引用的不應該是源碼而是源碼編譯出來的依賴庫,依賴庫的路徑應該是lib,所以應該改為