element-ui —— 使用的popup问题

1. 前言

我们知道弹出框都是在触发了某种条件后展示，而一个个的新的弹出框的展示，总是覆盖着上一个弹出框。实现覆盖功能需要保证新的弹出框的 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.zIndex，然后为 PopupManager.zIndex 加1，这样就保证了新的弹出框总是比旧的弹出框 z-index 大，省去自己一个个设置的麻烦，也减少问题的出现。

2. 遇到的问题

element 本身的弹出框没有什么问题，问题在于我们擅自使用了 element 未直接暴露出来的组件，我们把element-ui进行二次封装时，我所做的提示框组件是自己手敲的，并引用了 element 中的 popup，弹窗组件是其他小伙伴封装的，他直接使用了。
本以为一切都很完美，但是实际测试时突然发现一个致命的问题，我定制的弹窗总是会出现时不时无法展示的问题，要疯狂点击才会展示。排查后发现就是z-index的值问题，我手撸的弹窗 z-index 总是无法跟原生的弹出框 z-index 同步，原因其实很简单。。。使用的不是同一个PopupManager。
其实毛病就出在引用路径上的src，src就是source源的意思，源码中互相引用没问题，但是我们在项目中使用 element 组件的使用，并不是来自源码，而是来自源码编译出来的依赖库，是 npm 模块中 lib 目录下的文件。所以我们的自定义组件用了一个新的 PopupManager 对象跟原生 element 组件不同的 PopupManager，导致 zIndex 不同步，展示错误。

3. 解决

import Popup from 'element-ui/src/utils/popup'
修改为
import Popup from 'element-ui/lib/utils/popup'

4. 温馨提示

• es6中import的每个模块都是单例的，同一个对象被所有引用共用
• 引用element中未暴露的组件时，要注意尽量使用lib下的，防止出现类似问题
• 引用npm包的某个文件时时，要注意引用其源码和编译后库的区别

5. 自制弹窗组件

如果想自制弹窗组件，请点击右侧连接 -> https://blog.csdn.net/weixin_34200628/article/details/89277282

最后感谢文档 https://blog.csdn.net/weixin_30908941/article/details/97863331

如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！