vue项目Message提醒弹框多次弹出问题

vue+elementUi如何解决消息提醒弹出多次问题,只让弹出一次
问题原因:在循环体内需要消息提醒,一旦有一项不满足条件就弹出消息提醒,但有多条信息不满足条件且无法跳出循环时,例如:文件上传on-change=”handleChange()”时
解决方法一:在消息提醒前加this.$message.closeAll();
解决方法二:消息提醒全局重写,在main.js中写以下代码

import ElementUI, { Message } from 'element-ui'
Vue.use(ElementUI)
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) {
		// 判断是否已存在Message
		if (document.getElementsByClassName('el-message').length === 0) {
		Message[type](options)
		}
		} else {
		Message[type](options)
		}
	}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值