解决elementui的message与dialog的遮罩层的层级问题

在Element UI中，Message 和 Dialog 组件默认情况下会创建一个遮罩层来提供更好的用户体验，例如阻止用户在未关闭前面的操作。这两个组件生成的遮罩层会存在层级（z-index）问题，当它们同时出现时，可能会导致一个或者两个组件的遮罩层被另一个遮罩层遮挡。

解决这个问题的方法是手动调整层级（z-index），确保Message组件的遮罩层在Dialog组件遮罩层之上。

以下是一个示例代码，演示如何在Element UI中解决Message与Dialog的层级问题：

// 引入Element UI的Message和Dialog组件
import { Message, Dialog } from 'element-ui';
 
// 调整Message组件遮罩层的z-index
const messageInstance = Message({
  message: '这是一条消息',
  customClass: 'my-message' // 自定义类名以便设置样式
});
 
// 调整Dialog组件遮罩层的z-index
Dialog.alert({
  title: '提示',
  message: '这是一个对话框',
  customClass: 'my-dialog' // 自定义类名以便设置样式
});
 
// 在CSS中设置自定义的z-index值
// 假设.my-message和.my-dialog是你给Message和Dialog设置的自定义类名
<style>
  .my-message .el-message__content {
    z-index: 3000 !important; // 设置一个比Dialog遮罩层更高的值
  }
  .my-dialog .el-dialog__wrapper {
    z-index: 2000 !important; // 设置一个比Message遮罩层更高的值
  }
</style>

在这个示例中，我们通过customClass属性为Message和Dialog组件的遮罩层添加了自定义的类名，然后在CSS中为这些类名指定了z-index样式。通过使用!important可以确保覆盖默认样式。你需要根据实际情况调整z-index的值，使得它们能够正确地叠加。通常情况下，Dialog的z-index应该比Message的要高。