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

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

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

以下代码供参考:

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

本文章由javascript技术分享原创和收集

标签:element-uiaxios
如若转载请注明原文及出处:https://www.dsiab.com/post/da1b0d8c-efc3-4215-ad16-02532d1c8206
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: