Element修改彈窗類元件的層級

！win ！發表於2022-04-18
元件

前情

Element，一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫，在專案中我們就使用了它，非常nice

坑位

在使用Element元件的時候，一切都十分順利，但是在使用彈框類元件Popover 的時候，發現並沒有效果。

Why?

通過控制檯檢視元素後發現，其實Popover是有作用的，只是被頁面上別的內容遮擋了，是因為zIndex低於頁面上其它元素所致

解決方案

通過查詢Element文擋後發現官方是有考慮到層級問題，需要指定一個初始層級，後面的彈框類元件的層級會累加+1，這樣就保證後面觸發的層級始終高於前面的元件。

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已經初始化且已使用過彈框類元件

這種情況下通過修改Vue.prototype.$ELEMENT已經沒有效果了，因為它已經被使用過，這時需要手動修改，後面彈窗的元件會在此值的基礎上累加，程式碼如下：

import PopupManager from "element-ui/lib/utils/popup/popup-manager";
PopupManager.zIndex = 30000;

相關文章