element ui 两个弹框遮罩层

element ui中的两个弹框遮罩层问题是由于modal-append-to-body属性引起的。该属性用于控制遮罩层是否插入到body上方，如果为false，则遮罩层是在父元素身上的。当在最后一个弹框加入modal-append-to-body="false"时，打开第二个弹窗没有问题，但当关闭第二个弹窗时，遮罩层不会消失。这是因为第二个弹窗的遮罩层属性被添加到了父元素上，也就是第一个弹窗，当关闭第二个弹窗时，第一个弹窗的z-index被降低，此时，第一个弹窗的遮罩层依然存在（z-index最高），所以整个屏幕都会变黑（包括第一个弹窗）。而append-to-body属性是把遮罩层属性放在了body上，关闭第二个弹窗不会影响第一个弹窗的z-index，所以第一个弹窗的z-index是最高的，不会被遮罩层盖住。

相关问题

element ui的MessageBox弹框的遮罩加点击事件

在Element UI中，MessageBox弹框的遮罩同样可以添加点击事件。可以使用以下代码给遮罩添加点击事件：

this.$msgbox({
  title: '提示',
  message: '这是一条提示信息',
  showCancelButton: true,
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      // 点击了确定按钮
    } else if (action === 'cancel') {
      // 点击了取消按钮
    } else {
      // 点击了遮罩层
    }
    done(); // 关闭MessageBox
  }
});

在beforeClose回调函数中，第三个参数done是一个回调函数，调用它可以关闭MessageBox。当用户点击遮罩层时，action参数的值为''，可以在这里处理遮罩层的点击事件。

element-ui drawer 关闭遮罩层

要关闭 Element UI 的 Drawer 组件的遮罩层，可以在 Drawer 组件上添加 `:modal="false"` 属性，即可去掉遮罩层。例如：

<el-drawer title="Drawer" :visible="visible" :modal="false">
  <!-- Drawer 内容 -->
</el-drawer>

这样设置后，Drawer 组件就不会有遮罩层了。