element UI【解决方案】消息弹框被对话框遮挡（$message消息框被dialog或$alert遮罩）

问题描述

同时弹出消息弹框和对话框时，消息弹框被对话框遮挡

问题原因

element UI默认给$message消息弹框动态添加的z-index值比对话框小

解决方案

给 $message 添加自定义样式

this.$message({ message: "我是消息", customClass: "myMessageClass" });

划重点：必须是全局style，不能有scoped

<style >/* 必须是全局style，不能有scoped */
.myMessageClass {
  z-index: 3000 !important;
}</style>

完整代码范例

<template>
  <div>
    <el-button @click="notice" type="primary">同时弹出消息和对话框</el-button>
  </div>
</template>

<script>export default {
  methods: {
    notice() {
      this.$message({ message: "我是消息", customClass: "myMessageClass" });
      this.$alert("我是对话框", "对话框");
    },
  },
};</script>

<style >/* 必须是全局style，不能有scoped */
.myMessageClass {
  z-index: 3000 !important;
}</style>