element ui中message消息提示弹出个数太多，以及dialog对话框遮罩遮住message消息提示的问题

前言：在开发中，我们经常会用到这个message消息提示组件，提示用户操作成功，用户操作失败等，但是随着业务场景的增加，我们对消息提示的这个组件功能也会随之调整，鄙人在开发中就遇到下列问题：

1.消息提示弹出太多，如下图：

1.1消息提示弹出太多解决方案

1.1.1我们创建一个reMessage.js文件，在文件里我们可以这样写

import { ElMessage } from 'element-plus' //引入message弹出框，Vue3版本
//import { Message} from 'element-ui'; //引入message弹出框，Vue2版本

let messageDom = null
const resetMessage = (options) => {
  if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭
  messageDom = ElMessage(options)//Vue3版本
  //messageDom = Message(options)//Vue2版本
}
const typeArr = ['success', 'error', 'warning', 'info']
typeArr.forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') options = { message: options }
    options.type = type
    return resetMessage(options)
  }
})
export const Message = resetMessage

1.1.1 在vue2中使用

在main.js文件中，我们引入reMessage.js文件，如下图

注意：标记4一定要写在标记3：Vue.use（elementui）之后

在配置好上述步骤后，我们可以在该项目任意.vue文件里面使用下面的方法。

//方法一
this.$message.success('操作成功！')
//方法二
this.$message({type:success,message:'操作成功！'});

在任意.js文件里面，我们这样使用

import { Message } from '@/utils/reMessage';
//方法一
Message({type: 'success',message: '操作成功！'});
//方法二
Message.success('操作成功！');

1.1.2 在vue3中使用

我们在需要使用的页面里面引入reMessage.js文件，直接使用即可。

2.对话框遮罩遮住message消息提示解决方案

1.我们可以创建一个公共.css文件里面，并且写上样式：

//给message消息提示创建类名
.messageIndex {
    z-index: 3000 !important;
}

 如下图，创建一个all.css公共文件，

2.在mian.js里面引入all.css文件

3.场景使用

 //在vue2中使用
this.$message({ message: "操作成功", type: "success", customClass: "messageIndex" });
 //在vue3中使用
Message({ message: "操作成功", type: "success", customClass: "messageIndex" });