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

项目中使用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.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

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

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏