关于Element中popup的z-index问题

1.前言

我们知道Element中新的弹出框的展示，总是覆盖着上一个弹出框。实现覆盖功能需要保证新的弹出框的z-index要比旧的弹出框的z-index值相等或着更高，

为达到这个目的element为所有的弹出框(所有下拉框、提示框、Dialog对话框等等)直接或间接的使用到一个js组件element-ui/src/utils/vue-popper，

而这个vue-popper又使用了另一个组件element-ui/src/utils/popup/popup-manager.js。

 

PopupManager

PopupManager中有一个zIndex属性初始值为2000，所有的弹出框的z-index其实都是从这个PopupManager.zIndex中获取的，当要展示一个新的弹出框时，

组件便会通过 PopupManager.nextZIndex()  获取最新的PopupManager.zIndex，nextZIndex返回PopupManager.zIndex++，这样就保证了新的弹出框总是比旧的弹出框z-index大，

省去自己一个个设置的麻烦，也减少问题的出现。

2.遇到的问题

使用原生element组件弹窗没什么问题，但是因为项目中需要改动日期组件的，所以复制了一份element日期组件源码做改动。

按照项目要求的逻辑改完，在项目中运行一切正常，但是后面有客户提出弹窗中日期选择面板被覆盖的问题，需要点击很多次才会正常展示，通过调试发现日期组件的z-index 和其他弹窗的z-index 是分开计数的，所以其他弹窗的z-index大于日期组件的z-index,就会出现被覆盖的问题，这只能说明日期和其他组件获取z-index的不是同一个PopupManager
查看了先data-picker下的picker.vue其中引用vue-popper

import Popper from 'element-ui/lib/utils/vue-popper';

没毛病，但是其实毛病就出在这引用路径上的src，src就是source源的意思，源码中互相引用没问题，但是我们在项目中使用element组件的使用，并不是来自源码，而是来自源码编译出来的依赖库，是npm模块中lib目录下的文件。所以我们的自定义组件用了一个新的PopupManager对象跟原生element组件不同的PopupManager，导致zIndex不同步，展示错误。

3.解决

修改picker.vue，将原先
import Popper from 'element-ui/src/utils/vue-popper'
修改为
import Popper from 'element-ui/lib/utils/vue-popper'