解决element ui的z-index问题
文章不易,请关注公众号 毛毛虫的小小蜡笔,多多支持,谢谢。
问题
测试发现一个偶现的bug,第一次打开调度配置的页面,点击具体时间是能选择时间的,但关闭后打开其他配置页面,再回来打开调度配置的页面,发现点击具体时间没反应。
如下截图所示:
分析
一开始以为是调度配置页面组件的状态问题。
因为具体时间是用了第三方组件,页面组件是通过v-show方式来显示隐藏的。所以再次打开后,可能没把状态处理好。
但验证的过程中,突然想到一个问题:第三方组件应该不会有这么低级的bug,还是先看看它的时间选择div节点在不在。
结果,具体时间虽然点击没反应,但时间选择的div节点还是在的,只是页面上看不到而已!
原来是el-drawer的层级太高,把时间选择div节点覆盖了!
但为啥第一次打开调度配置页面就没问题,后面就被覆盖了呢?
原来是element ui的el-drawer,没打开一次,z-index都会+1。。。
第一次打开,如下截图所示:
第二次打开,如下截图所示:
第三次打开,如下截图所示:
解决
目前解决方式就是加个important,覆盖element ui的z-index。
.mx-datepicker-popup { z-index: 2999 !important; }
另外,el-dialog弹窗和其他浮窗貌似也有该问题。
疑问
为啥element ui的z-index会自增呢?
看了下源码,没具体说明什么原因。
如下截图所示:
然后到github上看了下,发现一开始就这样设计的。
如下截图所示:
最后
- 文章不易,请关注公众号 毛毛虫的小小蜡笔,多多支持,谢谢。
- 有疑问和问题,请留言。
- 如果觉得文章还可以,请点赞或收藏,谢谢。