全局封装message.js文件,解决重复点击按钮或多个请求同时报错时弹窗多个信息提示框

在utils文件夹中,新建message.js文件

import {
    
     Message } from 'element-ui'
let messageInstance = null
const resetMessage = options => {
    
    
  if (messageInstance) {
    
    
    messageInstance.close()
  }
  messageInstance = Message(options)
}
;['error', 'success', 'info', 'warning'].forEach(type => {
    
    
  resetMessage[type] = options => {
    
    
    if (typeof options === 'string') {
    
    
      options = {
    
    
        message: options,
        showClose: true,
      }
    }
    options.type = type
    return resetMessage(options)
  }
})
export const message = resetMessage

在main,js中引入

import {
    
     message } from '@/utils/message.js'
//注意,Vue.prototype.$message = message这一行一定要放在Vue.use(Element,{
    
    })后面,因为js文件中从'element-ui'中引入message,先执行这个,后才能挂载message
Vue.prototype.$message = message

猜你喜欢

转载自blog.csdn.net/weixin_49668076/article/details/128317618