因为工作需要,我二次封装了element的dialog组件
具体操作就是从node_modules找到element-ui文件夹再找到packages下的dialog
把component文件复制一下,然后再新建一个自己的组件文件把复制的内容粘贴进去,然后就开始修改样式添加盒子加一些逻辑啥的,最后覆盖掉element的dialog就可以了用了
但是在实际使用当中,我却发现了问题,我依法炮制了message组件,但是使用过程中发现消息弹窗却在dialog下面
经过排查发现,elment每次显隐一次弹窗类组件的时候它们的z-index就会累加,并且所有组件间这个zindex的值是公用的,也就是说每次后弹出的弹框永远都会比先弹出的zindex值大
举个例子,我第一次点击按钮显示dialog,他的z-index是2000
我这是隐藏这个dialog,再显示z-index就是2001了
(如果是+2的话是因为有遮罩层)
这时候就需要看看代码了
源码中message-box混入了Popup
在Popup中我们找到了PopupManager对象
PopupManager对象中存放着修改zindex的一系列方法,咱们可以看到如果没有设置初始值或者不是已经设置过值的时候都会取2000这个值
zindex自增的方法
每次开启dialog都会触发自增函数
这个时候咱们就知道了因为所有组件引用的都是同一个PopupManager,所以会记录每个组件弹窗的zindex
这时候再看我们的项目,dialog和我自己封装的弹窗confirm 初始值都是2000,每次弹出都是各自自增并且互不干扰
其实问题是路径
源码中引用是src
但是我们项目中引用的不应该是源码而是源码编译出来的依赖库,依赖库的路径应该是lib,所以应该改为
解决!
完结散花!