如何解决element-ui 同时显示多个message错误提示问题

ppylox
·6/23/2022·2 阅读
AI 摘要模型根据正文自动生成,仅供参考

针对element-ui中同时请求多个接口导致重复显示多个错误提示的问题,可在axios响应拦截器中通过判断页面是否已存在`.el-message.el-message--error`元素来控制提示显示:若不存在则调用`this.$message.error`显示错误,否则不显示。这样利用message的延时特性,确保上一个提示未消失时不再重复弹出,从而只保留一个错误提示,避免多个提示叠加影响用户体验。

最近笔者在开发中遇到一个问题,在使用element-ui库的过程中,使用axios请求成功后会通过message来显示提示信息,在正常登录情况下如果单个接口成功或失败会显示对应的信息,但是如果在示登录的情况下,打开某一个页面,如果有同时请求多个接口的话,那么此时接口可能都会报未登录,错误信息也就会显示多个,会给用户带来不友好的体验。

如何解决这个问题呢,笔者有一个最简单的方法,因为element-ui的message方法一般会有一个延时,在一定的延时后才会显示,我们可以在axios的返回拦截器里面做处理,比如判断页面没有【el-message el-message--error】 这个class,如果没有就显示错误提示,也就意味着如果上一个错误提示还没消失,那么下一个提示就不会显示,这样就保证了只显示一个提示,不会重复显示多个提示了。

以下代码供参考:

if(!document.querySelector(".el-message.el-message--error")){\n    this.$message.error("提示失败")\n}

相关文章