乐趣区

关于element-ui:解决element-ui的zindex问题

有趣味可关注公众号 毛毛虫的小小蜡笔,不定时更新前端等文章信息。

问题

测试发现一个偶现的 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 上看了下,发现一开始就这样设计的。
如下截图所示:

最初

  • 有趣味可关注公众号 毛毛虫的小小蜡笔,不定时更新前端等文章信息。
  • 文章有疑难和问题,请留言。
  • 如果感觉文章还能够,请点赞或珍藏,谢谢。
退出移动版