区块链技术博客
www.b2bchain.cn

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法的讲解

这篇文章主要介绍了vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法的讲解,通过具体代码讲解7125并且分析了vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法的讲解的详细步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7125.html。具体如下:

项目中使用element-ui时,message弹框功能是必须使用的,有时会在点击按钮时提示无权限,或者请求报错时给出适当提示:

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

但是重复点击按钮或者同一个页面多个请求同时报错时,就不美观了

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

可以看到,element-ui是动态往页面根节点插入message元素来实现弹框效果的,都拥有el-message属性

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

那么我们就可以通过判断页面中message的个数来决定要不要弹出第二个提示框

这就需要重新写一下element-ui的message

resetMessage.js

 /**重置message,防止重复点击重复弹出message弹框 */ import {     Message } from 'element-ui'; const showMessage = Symbol('showMessage') class DoneMessage {     [showMessage](type, options, single) {         if (single) {             if (document.getElementsByClassName('el-message').length === 0) {                 Message[type](options)             }         } else {             Message[type](options)         }     }     info(options, single = true) {         this[showMessage]('info', options, single)     }     warning(options, single = true) {         this[showMessage]('warning', options, single)     }     error(options, single = true) {         this[showMessage]('error', options, single)     }     success(options, single = true) {         this[showMessage]('success', options, single)     } } export const message = new DoneMessage();

main.js引入

 import {   message } from '@/utils/resetMessage'; 、、、、 Vue.use(ElementUI) Vue.prototype.$message = message;

全局调用方法:

this.$message.error(‘hello’)或者this,$message.error({message:’hello’})

注意:挂载自定义message必须放在Vue.use(ElementUI)后面,才能覆盖element-ui默认的message,不然没有效果

这样就不用担心重复点击会弹出好多弹框了

============================================================

今天同事提出了个获取更好体验的方法

按先前的方法,是更具页面中el-message的数量来决定要不要弹出下一个提示框,重复点击按钮时必须等上一个message隐藏了之后才能弹下一个,这就导致后续的点击没有反应,缺少页面反馈,会有卡顿的错觉,如果快速点击不同提示的按钮,由于第一个弹框还没隐藏,后续不同的提示也不会展示。

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

此时点击第二个按钮,但提示依然是按钮1的提示语

解决:

利用element-ui中message的close方法,在下一个弹框弹出前先把上一个弹框实例关闭掉

把之前的代码改造一下:

 /**重置message,防止重复点击重复弹出message弹框 */ import {     Message } from 'element-ui'; const showMessage = Symbol('showMessage'); let messageInstance = null; class DoneMessage {     [showMessage](type, options, single) {         if (messageInstance && single) {             messageInstance.close()         }         messageInstance = Message[type](options)         // if (single) {         //     if (document.getElementsByClassName('el-message').length === 0) {         //         Message[type](options)         //     }         // } else {         //     Message[type](options)         // }      }     info(options, single = true) {         this[showMessage]('info', options, single)     }     warning(options, single = true) {         this[showMessage]('warning', options, single)     }     error(options, single = true) {         this[showMessage]('error', options, single)     }     success(options, single = true) {         this[showMessage]('success', options, single)     } } export const message = new DoneMessage();

这样重复点击的时候页面弹框和用户的行为有了一定的交互,体验更好

==========================================================

2019-12-31编辑

这样的封装方法有一个缺陷,因为是通过new方法创建的对象,所以只能拿通过$message.error()的形式调用,不支持$message({})形式调用,参考element-ui中message方法的实现,将封装再次优化一下

resetMessage.js

 /**重置message,防止重复点击重复弹出message弹框 */ import {     Message } from 'element-ui'; let messageInstance = null; const resetMessage = (options) => {     if(messageInstance) {         messageInstance.close()     }     messageInstance = Message(options) } ;['error','success','info','warning'].forEach(type => {     resetMessage[type] = options => {         if(typeof options === 'string') {             options = {                 message:options             }         }         options.type = type         return resetMessage(options)     } }) export const message = resetMessage

这样两种调用方式都支持了

本文地址https://www.b2bchain.cn/7125.html

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法的讲解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们