iview 多弹框，显示z-index 不对，被遮挡的解决方案 goTop函数 modal Drawer 抽屉

iview 多弹框，显示z-index 不对，被遮挡的解决方案 goTop函数 modal

原因

弹多个modal框的时候，会被遮挡，导致后显示的框在下面

解决原理

获取当前弹框的z-index，然后设置新弹框是之前弹框的值加200即可

函数源码

export const goTop = (targetDom = '.ivu-modal-wrap', returnDom = '.drawer-1') => {
  const targetD = document.querySelector('.customHeaderModal').querySelector(targetDom)
  const returnD = document.querySelectorAll(returnDom)
  const targetZIndex = targetD.style[`z-index`]
  console.log(targetZIndex)
  returnD.forEach((dom, index) => {
    const inner = dom.querySelector('.ivu-drawer-wrap')
    const innerMask = dom.querySelector('.ivu-drawer-mask')
    inner.style[`z-index`] = Number(targetZIndex) + 200 + index
    innerMask.style[`z-index`] = Number(targetZIndex) + 200 + index
  })
}

执行方法

在点击的click事件中执行

this.$nextTick(() => {
        this.drawerShow = true
        goTop()
      })

弹框的抽屉加class

<!--抽屉-->
    <Drawer title="aaa"
            v-model="aaa"
            class="drawer-1" // 增加这个class