关于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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
javascript 简练的几个函数
Aug 29 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 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
PHP 和 HTML
2006/10/09 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
学习ExtJS form布局
2009/10/08 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python numpy元素的区间查找方法
2018/11/14 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang