ElementUI中Message防抖解决方案

使用message组件时，当多次连续点击按钮或者触发message提示时，会多次出现弹窗提示，用户使用起来很不友好。因此需要解决message防抖问题，实现用户连续多次触发只进行一次提示。

main.js

import Vue from 'vue' 
import App from './App.vue' 
import router from './router' 
import store from './store' 
import 'element-ui/lib/theme-chalk/index.css' import ElementUI, { Message } from 'element-ui' 
Vue.use(ElementUI) // 重写message,解决防抖问题：多次出现弹窗提示 // 为了实现Class的私有属性 const showMessage = Symbol('showMessage') //  重写ElementUI的Message //  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置 let messageInstance = null 
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 (messageInstance && single) {       
            messageInstance.close() // 先把原来的关闭     
        }     
        messageInstance = Message[type](options) // 再创建新的消息   
        } 
     } 
     Vue.prototype.$message = new DonMessage() 
     Vue.config.productionTip = false 
     new Vue({   
         router,   
         store,   
         render: h => h(App) }).$mount('#app')

使用

this.$message.success("");//success可替换为 info warning error