关于javascript:element-ui的zindex问题

35次阅读

共计 720 个字符,预计需要花费 2 分钟才能阅读完成。

一、问题

测试发现一个 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-drawer 的 2000,但小于最大值 9999}

为啥 el-drawer 的 z -index 会自增?
看了下源码,没具体阐明:

而后到 github 上 blame,发现一开始就这样设计的:

https://github.com/ElemeFE/el…

而后看了下 issue,曾经有人提了该问题:

https://github.com/ElemeFE/el…

三、论断

1、目前貌似只能通过 important 笼罩的形式来解决
2、element ui 也不给个参数来管制是否自增,只能无语了
3、el-dialog 弹窗和其

正文完
 0