Element修改彈窗類組件的層級的實現(xiàn)
前情
Element，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫，在項目中我們就使用了它，非常nice
坑位
在使用Element組件的時候，一切都十分順利，但是在使用彈框類組件Popover 的時候，發(fā)現(xiàn)并沒有效果。
Why?
通過控制臺查看元素后發(fā)現(xiàn)，其實Popover是有作用的，只是被頁面上別的內(nèi)容遮擋了，是因為zIndex低于頁面上其它元素所致
解決方案
通過查詢Element文擋后發(fā)現(xiàn)官方是有考慮到層級問題，需要指定一個初始層級，后面的彈框類組件的層級會累加+1，這樣就保證后面觸發(fā)的層級始終高于前面的組件。
Element初始化時重置層級
Element組件使用有二種方式，對于不同的使用方式解決方式不同。
完整引入 Element：
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
按需引入Element:
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
官方文擋-全局配置項：https://element.eleme.cn/#/zh-CN/component/quickstart
如果Element已經(jīng)初始化且已使用過彈框類組件
這種情況下通過修改Vue.prototype.$ELEMENT已經(jīng)沒有效果了，因為它已經(jīng)被使用過，這時需要手動修改，后面彈窗的組件會在此值的基礎(chǔ)上累加，代碼如下：
import PopupManager from "element-ui/lib/utils/popup/popup-manager"; PopupManager.zIndex = 30000;
到此這篇關(guān)于Element修改彈窗類組件的層級的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element 彈窗類層級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一文詳解如何在Vue網(wǎng)站中實現(xiàn)多語言支持
在當(dāng)今全球化的互聯(lián)網(wǎng)環(huán)境中,為網(wǎng)站提供多語言支持已成為提升用戶體驗和擴大受眾范圍的關(guān)鍵策略,本文為大家介紹了如何在Vue網(wǎng)站中實現(xiàn)多語種支持功能,有需要的可以了解下2025-03-03
Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue中PC端使用高德地圖實現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情(完整實例)
這篇文章主要介紹了vue中PC端使用高德地圖實現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue自定義模態(tài)對話框彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
給大家講解一下vue組件發(fā)布到npm簡單方法和步驟過程，需要的朋友一起學(xué)習(xí)參考一下。2017-11-11
vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色
這篇文章主要介紹了vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue數(shù)據(jù)綁定簡析小結(jié)，本文將從源碼的角度來對Vue響應(yīng)式數(shù)據(jù)中的觀察者模式進行簡析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家介紹了Vue組件高級通訊之$attrs與$listeners使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue項目中配置pug解析支持的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
VueJs單頁應(yīng)用實現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例
本篇文章主要介紹了VueJs單頁應(yīng)用實現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例，具有一定的參考價值，有興趣的可以了解一下2017-07-07