如何让Element UI的Message消息提示每次只弹出一个

Element UI的Message消息提示是点击一次触发一次的。在封装接口中调用失败会返回多个弹窗，导致很不友好，所以就出了一下参考

解决方案

import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')
class DonMessage {
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }

    [showMessage](type, options, single) {
        if (single) {
            // 判断是否已存在Message
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
}
export default new DonMessage()

创建一个message.js

调用方式

import Messages from '@/message'  // 按需引入

Messages.warning('请登录')

Vue.prototype.$message = Messages // main.js

this.$message.warning("请登录") // vue文件中调用

因为使用了new DonMessage()的原因，所以导致this.$message(options)的方式无法使用。所以推荐使用this.$message.success('成功提示')或者this.$message.success(options)的方式进行调用。具体参数可以查看官方文档。