关于vue表单提交防双/多击的例子


Posted in Javascript onOctober 31, 2019

先说下出现场景:

测试这次比较极端(也有可能是测试又学会什么新知识了,哈哈),说是在点击提交和调用之间有可能有狂暴的用户在多连击,就像打游戏一样,调用接口后的loading状态切换就无效了

然后,就只好自己写了个基于vue防多击的指令,小小偷懒了下,我里面已经注入fastClick了,因此响应方法是极快的,因此只需要稍微控制下二次点击的时间即可

export default {}.install = (Vue, options = {}) => {
 Vue.directive('dbClick', {
 inserted(el, binding) {
  el.addEventListener('click', e => {
  if(!el.disabled) {
   el.disabled = true;
   let timer = setTimeout( () => {
   el.disabled = false;
   },1000)
  }
  })
 }
 })
}

用法:

<pr-col hor="center"><mt-button v-dbClick type="primary" @click="saveOrder">保存</mt-button></pr-col>

以上这篇关于vue表单提交防双/多击的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
jQuery实现元素的插入
Feb 27 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
解析原生JS getComputedStyle
May 25 Javascript
Vuex的实战使用详解
Oct 31 #Javascript
如何在Vue中抽离接口配置文件
Oct 31 #Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 #Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 #Javascript
Vue最新防抖方案(必看篇)
Oct 30 #Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 #Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 #Javascript
You might like
PHP6新特性分析
2016/03/03 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
从0开始的Python学习016异常
2019/04/08 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
python安装后的目录在哪里
2020/06/21 Python
Django日志及中间件模块应用案例
2020/09/10 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
教师实习自我鉴定
2013/12/18 职场文书
部队领导证婚词
2014/01/12 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript