Element UI的Message消息提示是點擊一次觸發一次的。在開發的時候經常會作為一些校驗提示，但是公司的測試人員在進行測試時會一直點，然后就會出現如下圖的情況。雖然客戶使用的時候一般來說不會出現這種情況（畢竟客戶不會閑著沒事一直點點點，而且就算出現了也只是不太好看，對功能什么的都沒什么影響），但既然測試提出來了那還是要解決的。

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

解決方案

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

?

多個Message

import ElementUI, { Message } from 'element-ui'
// ... Vue.use(ElementUI)
// 命名根據需要，DonMessage只是在文章中使用
Vue.prototype.$message = new DonMessage()// ...// 為了實現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) {// 判斷是否已存在Messageif (document.getElementsByClassName('el-message').length === 0) {Message[type](options)}} else {Message[type](options)}}
}

同時，因為我們常常會把Message作為全局方法來使用，所以我們要修改Vue.prototype.$message。

?

目前改成了 document.getElementsByClassName('el-notification').length === 0

?

?