?

一、遇到的問題

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

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

?

二、解決方案：

在vue中使用Element的message組件

• 在vue文件中使用

this.$message({message: "提示信息",type: "success" })

• 在js文件中使用

import ElementUI from 'element-ui'; ElementUI.Message({message: '提示信息',type: 'warning' });

解決消息彈窗重復顯示

// message.js import { Message } from 'element-ui'const showMessage = Symbol('showMessage') 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)}} } export default new DonMessage()

在有需要的地方引入

import DonMessage from '@/message'

• js文件中直接使用

DonMessage.warning('請登錄')

• 掛載到vue原型上

// main.js Vue.prototype.$message = DonMessage // vue文件中調用 this.$message.warning("請登錄")

?

總結

以上是生活随笔為你收集整理的刷新页面，无论点击多少次让Element UI的Message消息提示弹出一个的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。