关于element ui 限制每次只弹出一个消息提示

方法一:

判断是否存在消息提示【取[0]表示第一个消息提示】,若不存在则显示,反之不显示。

【弊端】:该方式会导致 当页面上已经有一条提示消息时,再次弹出一条新消息时会无法显示该新弹出的消息

let doms = document.getElementsByClassName('el-message')[0]
if(doms == undefined) {
	this.$message({
      showClose: true,
      message: '这是一条消息提示'
    });
}

但是,若没有硬性要求:即无需只能同时存在一条信息。则可以根据消息内容来判断要不要弹出下一个消息提示

let doms= document.getElementsByClassName('el-message')[0]
//下面方式可以获取到消息文本内容,
//要获取innerHtml/innerText可根据实际业务需求
let domsChildText = doms.getElementsByClassName('el-message__content')[0].innerText;
由此类推:
若同时存在多个消息提示时,
通过打印  document.getElementsByClassName('el-message')  
我们得到下图显示的信息:↓

在这里插入图片描述

由此得出,我们可以通过循环所有消息提示的元素来进行逐一判断。
那么具体的代码实现方式就要根据实际的业务逻辑和已有代码来做了
方法二:

每次弹出前关闭所有消息提示,
但这种也有弊端:比如同时弹出多个消息提示时,还是会有动画效果(关闭又显示的动画)

this.$notify.closeAll();
this.$message({
     showClose: true,
     message: '这是一条消息提示'
   });

综上,第一个方法可扩展性高,第二种会在某些场景比较实用。
具体使用哪一种还是要结合实际业务逻辑需求并做相应优化

灵感来源:https://www.cnblogs.com/tlfe/p/12220705.html

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值