解決elementUI中message消息多次重復展現的問題

頁面中多次彈出message框，客戶體驗度非常不好。

 

 

 

main.js中 重寫$message方法

import ElementUI, { Message } from 'element-ui'

// 為了實現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()

在頁面中使用下面的寫法

this.$message.success("");//success可替換為 info warning error

 

20200528修改

想在vue main.js里面用elementUI的this.$message.error('錯誤');

修改為Vue.prototype.$message.error('錯誤');

 

如果想要是使用this.$message({})方法，可參考原文地址：https://blog.csdn.net/dongguan_123/article/details/101290164?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase