如何讓Element UI的Message消息提示每次只彈出一個

前言

Element UI的Message消息提示是點擊一次觸發一次的。在開發的時候常常會做爲一些校驗提示，可是公司的測試人員在進行測試時會一直點，而後就會出現以下圖的狀況。雖然客戶使用的時候通常來講不會出現這種狀況（畢竟客戶不會閒着沒事一直點點點，並且就算出現了也只是不太好看，對功能什麼的都沒什麼影響），但既然測試提出來了那仍是要解決的。

最開始查了下Element UI的官方文檔，發現確實沒提供只彈出一次的功能。其餘的如MessageBox和Notification都不太符合要求，更重要的是Message已在項目中大量存在，若是不能在全局解決的話，修改爲本實在是過高昂了 。

解決方案

經過對Message分析能夠得知：Element UI在調用Message組件時會在HTML中插入如下代碼，因此咱們能夠經過document.getElementsByClassName('el-message').length > 0來判斷當前頁面是否已存在Message。

單個Message

多個Message

同時，由於咱們經常會把Message做爲全局方法來使用，因此咱們要修改Vue.prototype.$message。

實現代碼以下：

// 一般都是在main.js中處理

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

// ...

// 爲了實現Class的私有屬性
const showMessage = Symbol('showMessage')
/** 
 *  重寫ElementUI的Message
 *  single默認值true，由於項目需求，默認只彈出一個，能夠根據實際須要設置
 */
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)
    }
  }
}

// ... 

Vue.use(ElementUI)
// 命名根據須要，DonMessage只是在文章中使用
Vue.prototype.$message = new DonMessage()

2019-09-11更新：由於有問道這一塊，更新一下調用方式。

調用方式

由於使用了new DonMessage()的緣由，因此致使this.$message(options)的方式沒法使用。因此推薦使用this.$message.success('成功提示')或者this.$message.success(options)的方式進行調用。具體參數能夠查看官方文檔。