Element修改彈窗類(lèi)組件的層級(jí)的實(shí)現(xiàn)
前情
Element,一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù),在項(xiàng)目中我們就使用了它,非常nice
坑位
在使用Element組件的時(shí)候,一切都十分順利,但是在使用彈框類(lèi)組件Popover 的時(shí)候,發(fā)現(xiàn)并沒(méi)有效果。
Why?
通過(guò)控制臺(tái)查看元素后發(fā)現(xiàn),其實(shí)Popover是有作用的,只是被頁(yè)面上別的內(nèi)容遮擋了,是因?yàn)閦Index低于頁(yè)面上其它元素所致
解決方案
通過(guò)查詢(xún)Element文擋后發(fā)現(xiàn)官方是有考慮到層級(jí)問(wèn)題,需要指定一個(gè)初始層級(jí),后面的彈框類(lèi)組件的層級(jí)會(huì)累加+1,這樣就保證后面觸發(fā)的層級(jí)始終高于前面的組件。
Element初始化時(shí)重置層級(jí)
Element組件使用有二種方式,對(duì)于不同的使用方式解決方式不同。
完整引入 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);
官方文擋-全局配置項(xiàng):https://element.eleme.cn/#/zh-CN/component/quickstart
如果Element已經(jīng)初始化且已使用過(guò)彈框類(lèi)組件
這種情況下通過(guò)修改Vue.prototype.$ELEMENT已經(jīng)沒(méi)有效果了,因?yàn)樗呀?jīng)被使用過(guò),這時(shí)需要手動(dòng)修改,后面彈窗的組件會(huì)在此值的基礎(chǔ)上累加,代碼如下:
import PopupManager from "element-ui/lib/utils/popup/popup-manager"; PopupManager.zIndex = 30000;
到此這篇關(guān)于Element修改彈窗類(lèi)組件的層級(jí)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Element 彈窗類(lèi)層級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue?this.$refs.xxx報(bào)錯(cuò)undefined問(wèn)題及解決
這篇文章主要介紹了vue?this.$refs.xxx報(bào)錯(cuò)undefined問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01前端使用print.js實(shí)現(xiàn)打印功能(基于vue)
最近新接了一個(gè)需求,想要在前端實(shí)現(xiàn)打印功能,下面這篇文章主要給大家介紹了關(guān)于前端使用print.js實(shí)現(xiàn)打印功能(基于vue)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11Vue2.0 vue-source jsonp 跨域請(qǐng)求
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請(qǐng)求,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08vue element table 表格請(qǐng)求后臺(tái)排序的方法
今天小編就為大家分享一篇vue element table 表格請(qǐng)求后臺(tái)排序的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09