方法一:
判断是否存在消息提示【取[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: '这是一条消息提示'
});
综上,第一个方法可扩展性高,第二种会在某些场景比较实用。
具体使用哪一种还是要结合实际业务逻辑需求并做相应优化