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')
// ...其他代码