關於使用element中的popup問題

高產似母豬。。寫完上篇看了幾集新番就空虛了。。零點時分決定爬起來，趁着清明假期能寫多寫點。

1.前言

咱們知道彈出框都是在觸發了某種條件後展現，而一個個的新的彈出框的展現，老是覆蓋着上一個彈出框。實現覆蓋功能須要保證新的彈出框的z-index要比舊的彈出框的z-index值相等或着更高，爲達到這個目的element爲全部的彈出框(全部下拉框、提示框、Dialog對話框等等)直接或間接的使用到一個js組件element-ui/src/utils/vue-popper，而這個vue-popper又使用了另外一個組件element-ui/src/utils/popup/popup-manager.js。

PopupManager

PopupManager中有一個zIndex屬性初始值爲2000，全部的彈出框的z-index其實都是從這個PopupManager.zIndex中獲取的，當要展現一個新的彈出框時，組件便會去獲取最新的PopupManager.zIndex，而後爲PopupManager.zIndex加1，這樣就保證了新的彈出框老是比舊的彈出框z-index大，省去本身一個個設置的麻煩，也減小問題的出現。

2.遇到的問題

element自己的彈出框沒有什麼問題，問題在於咱們擅自使用了element未直接暴露出來的組件，這裏以el-select中的select-dropdown.vue爲例。

咱們經過拷貝el-select源碼來定製下拉框的內容和邏輯，一切看起來都很完美，可是有一個致命的問題，本身定製的選擇器的下拉框老是會出現時不時沒法展現的問題，要瘋狂點擊纔會展現。排查後發現就是z-index的值問題，自定義的下拉框的z-index老是沒法跟原生的彈出框z-index同步，緣由其實很簡單。。。使用的不是同一個PopupManager
原來咱們直接複製el-select源碼，源碼中引入下拉框
import ElSelectMenu from './select-dropdown.vue'
咱們修改成
import ElSelectMenu from 'element-ui/packages/select/src/select-dropdown.vue'
再來看select-dropdown.vue源碼中對於vue-popper的引用
import Popper from 'element-ui/src/utils/vue-popper'
沒毛病，可是其實毛病就出在這引用路徑上的src，src就是source源的意思，源碼中互相引用沒問題，可是咱們在項目中使用element組件的使用，並非來自源碼，而是來自源碼編譯出來的依賴庫，是npm模塊中lib目錄下的文件。因此咱們的自定義組件用了一個新的PopupManager對象跟原生element組件不一樣的PopupManager，致使zIndex不一樣步，展現錯誤。

3.解決

複製select-dropdown.vue，將原先
import Popper from 'element-ui/src/utils/vue-popper'
修改成
import Popper from 'element-ui/lib/utils/vue-popper'
el-select改引用爲咱們修改後的select-dropdown.vue。。。

4.最後

• 1.es6中import的每一個模塊都是單例的，同一個對象被全部引用共用
• 2.引用element中未暴露的組件時，要注意儘可能使用lib下的，防止出現相似問題
• 3.引用npm包的某個文件時時，要注意引用其源碼和編譯後庫的區別