?

一、遇到的問題

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

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

?

二、解決方案：

在vue中使用Element的message組件

• 在vue文件中使用

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

• 在js文件中使用

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

解決消息彈窗重復(fù)顯示

// 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('請(qǐng)登錄')

• 掛載到vue原型上

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

?

總結(jié)

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

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