关于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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
js原型链原理看图说明
Jul 07 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
vant自定义二级菜单操作
Nov 02 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
python实现划词翻译
2020/04/23 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python logging设置和logger解析
2019/08/28 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
党校自我鉴定范文
2013/10/02 职场文书
元旦寄语大全
2014/04/10 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
入党介绍人考察意见
2015/06/01 职场文书
个人更名证明
2015/06/23 职场文书
2015暑假假期总结
2015/07/13 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js