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

最新推荐文章于 2024-02-06 09:02:17 发布

春晓_春眠花落

最新推荐文章于 2024-02-06 09:02:17 发布

阅读量392

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_49668076/article/details/128317618

版权

vue 专栏收录该内容

46 篇文章 7 订阅

订阅专栏

在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