上图是多次点击弹出警告框的效果，按照正常的理解，只要弹出过一次，后面不管怎么点都不应该在弹出，用原来的消息体即可，可惜element ui没有做这方面的处理，因此只能自己封装了
// element ui message封装，避免同一消息反复弹出
import { Message } from ‘element-ui‘
const showMessage = Symbol(‘showMessage‘)
class OnlyMessage {
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) {
if (document.getElementsByClassName(‘el-message‘).length === 0) {
Message[type](options)
}
} else {
Message[type](options)
}
}
}
export default new OnlyMessage()
保存为onlyMsgbox.js
main.js中引入
import OnlyMessage from ‘./utils/onlyMsgbox‘ Vue.prototype.$message = OnlyMessage
需要的地方使用
this.$message.success(‘成功消息‘) this.$message.warning(‘警告消息‘) this.$message.info(‘普通信息‘) this.$message.error(‘错误消息‘)
原文：https://www.cnblogs.com/diantao/p/12587305.html