封裝element彈窗類組件z-index覆蓋問題,使用的popup的問題


封裝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,所以應該改為

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM