封装element弹窗类组件z-index覆盖问题,使用的popup的问题
工作需要封装消息弹窗组件,但是样式需要改动,所以我就复制了element组件中message-box的源码自己修改了一番,在main.js中
Vue.prototype.$confirm = MessageBox.confirm;
把confirm 覆盖掉
但是在实际使用当中,消息弹窗却在dialog下面
看元素的zindex的时候发现elment每次显隐一次弹窗类组件的时候它们的z-index就会累加,并且所有组件间这个zindex的值是公用的,也就是说每次后弹出的弹框永远都会比先弹出的zindex值大
这时候就需要看看代码了
源码中message-box混入了Popup
在Popup中我们找到了PopupManager对象
PopupManager对象中存放着修改zindex的一系列方法,咱们可以看到如果没有设置初始值或者不是已经设置过值的时候都会取2000这个值
设置下一个弹窗的zindex+1
因为所有组件引用的都是同一个PopupManager,所以会记录每个组件弹窗的zindex
这时候再看我们的项目,dialog和我自己封装的弹窗confirm 初始值都是2000,每次弹出都是各自+1并且互不干扰
其实问题是路径,源码中引用是src,
但是我们项目中引用的不应该是源码而是源码编译出来的依赖库,依赖库的路径应该是lib,所以应该改为