vue + element 消息提示$message只出现一次

看大佬链接https://blog.csdn.net/dongguan_123/article/details/101290164?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
看最后 最新的代码 自测相当有用

1、在util里新建一个resetMessage.js 文件

/**重置message，防止重复点击重复弹出message弹框 */
import {
    Message
} from 'element-ui';
const showMessage = Symbol('showMessage')
class DoneMessage {
    [showMessage](type, options, single) {
        if (single) {
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const message = new DoneMessage();

2、在main.js里面引入

import {
  message
} from '@/utils/resetMessage';
、、、、
Vue.use(ElementUI)
Vue.prototype.$message = message;

如果只是部分 需要 只出现一次  vue.prototype.$xxx  改一个名字就好啦

 

注意：挂载的话只能在vue.use(ElementUI)后面