通过源码解决二次封装element弹窗类组件z-index覆盖问题与popup的使用

1,048 阅读2分钟

因为工作需要,我二次封装了element的dialog组件

具体操作就是从node_modules找到element-ui文件夹再找到packages下的dialog

QQ截图20220518213006.png

把component文件复制一下,然后再新建一个自己的组件文件把复制的内容粘贴进去,然后就开始修改样式添加盒子加一些逻辑啥的,最后覆盖掉element的dialog就可以了用了

QQ截图20220518213624.png

但是在实际使用当中,我却发现了问题,我依法炮制了message组件,但是使用过程中发现消息弹窗却在dialog下面

2160250-20220408150846377-835880390.png

经过排查发现,elment每次显隐一次弹窗类组件的时候它们的z-index就会累加,并且所有组件间这个zindex的值是公用的,也就是说每次后弹出的弹框永远都会比先弹出的zindex值大

举个例子,我第一次点击按钮显示dialog,他的z-index是2000 QQ截图20220518214604.png

我这是隐藏这个dialog,再显示z-index就是2001了 QQ截图20220518214642.png

(如果是+2的话是因为有遮罩层)

这时候就需要看看代码了

源码中message-box混入了Popup

QQ截图202205182130106.png

在Popup中我们找到了PopupManager对象

QQ截图20220518215121.png

PopupManager对象中存放着修改zindex的一系列方法,咱们可以看到如果没有设置初始值或者不是已经设置过值的时候都会取2000这个值

QQ截图20220518215430.png

zindex自增的方法

QQ截图20220518215602.png

每次开启dialog都会触发自增函数

QQ截图20220518220238.png

这个时候咱们就知道了因为所有组件引用的都是同一个PopupManager,所以会记录每个组件弹窗的zindex

这时候再看我们的项目,dialog和我自己封装的弹窗confirm 初始值都是2000,每次弹出都是各自自增并且互不干扰

其实问题是路径

源码中引用是src

QQ截图20220518220448.png

但是我们项目中引用的不应该是源码而是源码编译出来的依赖库,依赖库的路径应该是lib,所以应该改为

QQ截图20220518220550.png

解决!

完结散花!