Debug-034-elementUI中Message消息多次触发只提示一次

前言

        只要是用过elementUI的各位，肯定知道其中的“Message 消息提示”组件。一般执行完特定操作或者前端根据接口返回信息报出一个全局提示的作用。

element-plus

效果一

效果二 

        问题：页面执行操作，同时调用两个接口，此时登录过期，多次触发响应拦截，提示了两次过期。其实感觉是不需要处理的，不过测试不希望会出现这个数字，我们就来看一下怎么处理。

（1）关键属性：grouping

首先这个属性是支持显示这个效果（效果二）的原因，不使用这个属性的话，正常是分开提示的（效果一）。

          ElMessage({
            message: "登录过期，请重新登录",
            grouping: true,
            type: 'error',
          })

有两种办法：

方法一：CSS的办法

前提：方法1是必须在element-plus中使用，我查看了elementUI的文档和源码我发现elementUI中其实还没有grouping属性，所以通过隐藏数字是没用的

element-plus比起elementUI来讲已经做了一部分优化，使用grouping之后不再弹出多个提示。但是会展示“效果二”的样子。将提示的个数暴露出来。

这里可以利用我在之前写过的文章中提到的方法，把这个提示截取到，暂停之后，登录过期提示就不会消失了。然后找到他的样式

调试代码的参考文档大家可以看一下：Debug-032-前端F12-查看伪元素的一个小技巧-优快云博客

 这招F8暂停真的确实很好捕捉到这种会“消失”的样式。

然后在全局的位置添加CSS把数字隐藏即可：

//登录过期时，页面请求过期接口大于等于2时： 隐藏 Message-消息提示 (分组消息合并)grouping 为 true时的右上角的数字
.el-message .el-message__badge{
  display: none;
}

方法二：全局响应拦截器

        在这里通过一个变量的布尔值去判断，只要满足“提示过一次”就停止提示即可。代码时间原因就省略了。这个是element-plus和elementUI都可以使用的办法。网上很多方法都是基于此。如果你项目中使用Vue3+element-plus，那么可以使用方法一万能的CSS，算是占巧了。