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

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 ​​​https://www.VuejsDev.com​​ 用于梳理知识点