vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法

问题场景：我们在axios中统一处理500、401、404状态码并统一抛出el-message提示，那么就会出现重复提示的问题非常的不友好。如图：

解决办法：
新建一个resetMessage.js文件,写入以下代码

// resetMessage.js // 重置message，防止重复点击重复弹出message弹框 import {  Message } from 'element-ui' let messageDom = null const resetMessage = (options) => {  if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭 messageDom = Message(options) } // message类型 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 myMessage = resetMessage 

方法一：全局引入及使用
在main.js文件中引入并挂在到全局
注意：挂载自定义$message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message，不然没有效果

// main.js ... // 其他代码 / 引入重写的resetMessage.js文件 import {  myMessage } from './plugins/resetMessage' Vue.use(ElementUI) 

// 注意：挂载自定义$message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message，不然没有效果

Vue.prototype.$message = myMessage ...// 其他代码 // page.vue 页面调用 methods: {  test() {  this.$message({ message: '测试', type: 'success'}) setInterval(()=> {  this.$message.info('测试12')},1000) } } 

方法二：局部引入及使用

// axios.js import {  myMessage } from '../plugins/resetMessage' // ...其他代码 myMessage.warning('xxxxxxxx') // ...其他代码