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;

 到此这篇关于Element修改弹窗类组件的层级的实现的文章就介绍到这了,更多相关Element 弹窗类层级内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！