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

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

解決方案

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

?

多個Message

import ElementUI, { Message } from 'element-ui' // ... Vue.use(ElementUI) // 命名根據(jù)需要，DonMessage只是在文章中使用 Vue.prototype.$message = new DonMessage()// ...// 為了實現(xiàn)Class的私有屬性 const showMessage = Symbol('showMessage') /** * 重寫ElementUI的Message* single默認值true，因為項目需求，默認只彈出一個，可以根據(jù)實際需要設(shè)置*/ 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

?

?

總結(jié)

以上是生活随笔為你收集整理的如何让Element UI的Message消息提示每次只弹出一个的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。