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;