关于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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
node.js中 stream使用教程
Aug 28 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP中的替代语法简介
2014/08/22 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python实现图片中文字分割效果
2019/07/22 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
化验室技术员岗位职责
2013/12/24 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年资料员工作总结
2015/04/25 职场文书
安全生产协议书
2016/03/22 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers