《el-dialog的z-index递增引发的bug》

317 阅读1分钟

背景

业务是在el-dialog组件里有一个选择日期范围的组件,但是当准备点击日期组件去选择日期时,却发现日期组件弹框被el-dialog遮挡了,如图:

微信截图_20240829170824.png

微信截图_20240829171158.png

初步调试

遇到问题解决问题,于是F12开始调试,发现被遮挡的原因是日期组件弹框的z-index比el-dialog组件的el-dialog__wrapper元素的z-index小,如图:

微信截图_20240829171633.png

于是我强制将mx-datepicker-popup的z-index设置为2004,但是发现第一次点开el-dialog组件的时候日期组件的弹框没有被遮挡,但是关闭el-dialog再次打开的时候日期组件的弹框又被遮挡住了。

继续调试

接着又继续调试,发现el-dialog组件每次关闭后再打开el-dialog__wrapper元素的z-index会递增,这也是为什么第一次点开el-dialog组件的时候日期组件的弹框没有被遮挡,但是关闭el-dialog再次打开的时候日期组件的弹框又被遮挡住了。

微信截图_20240829172607.png

微信截图_20240829172827.png

从截图可以看出确实每次关闭再打开z-index会递增。

终极解决方案

在el-dialog组件上添加一个z-index="1000"属性

<el-dialog
    title="选择销售合同"
    :visible.sync="dialogVisible"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    append-to-body
    z-index="1000"
    custom-class="micro-app-report sale-contract-dialog"
    @close="handleClose"
    width="1400px"
    top="10vh"
  >