Element修改弹窗类组件的层级

前情

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;
posted @ 2022-04-18 19:00  !win !  阅读(242)  评论(0编辑  收藏  举报