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 弹框圆角

要给 Element UI 的弹框添加圆角，你可以使用 CSS 来实现。可以通过以下方式来添加圆角样式：

1. 使用 `border-radius` 属性来设置圆角值。在 Element UI 的弹框组件中，可以通过设置 `.el-dialog` 类的样式来添加圆角。例如：

.el-dialog {
  border-radius: 10px; /* 设置圆角半径为 10px */
}

2. 如果你只想给弹框的某个特定部分添加圆角，你可以使用其他类名或选择器来定位该部分，并为其添加 `border-radius` 属性。例如，如果你只想给弹框的头部添加圆角，可以使用 `.el-dialog__header` 类：

.el-dialog__header {
  border-radius: 10px 10px 0 0; /* 设置顶部圆角，底部为直角 */
}

记得将上述 CSS 样式添加到你的项目中的样式文件中，或者以其他方式引入到你的项目中。这样就可以给 Element UI 的弹框添加圆角了。