vue3.x 多项目开发elementPlus使用iframe嵌套，弹框不覆盖所有页面的问题

我们先创建一个js，在最外层项目中定义全局的方法

  window.OpenDialog = () => {
    const box = document.querySelectorAll('.div-dialog')
    if (box.length) {
      for (let i = 0; i < box.length; i++) {
        box[i].remove()
      }
    }
    const div = document.createElement('div')
    div.className = 'div-dialog an-show'
    document.body.appendChild(div)
  }
  window.CloseDialog = () => {
    const box = document.querySelectorAll('.div-dialog')
    if (box.length) {
      for (let i = 0; i < box.length; i++) {
        box[i].className = 'div-dialog an-close'
        // box[i].remove()
      }
    }
  }

在iframe页面，唤起dialog或者别的提示语的时候，需要调用该方法即可

if (window.parent.OpenDialog !== undefined) {
          if (props.dialogObject.dialogVisible) {
            window.parent.OpenDialog()
          } else {
            window.parent.CloseDialog()
          }
        }

注意样式控制

.div-dialog.an-show {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2224;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    overflow: auto;
    animation: modal-fade-in .3s;
}
.div-dialog.an-close {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    overflow: auto;
    transition: all .4s;
    animation: modal-fade-out .4s;
}

@-webkit-keyframes modal-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes modal-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes modal-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes modal-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}