解决Vue提交按钮重复点击重复提交问题防抖

1秒内只能提交一次

1、创建js文件preventReClick.js

export default {install (Vue) {// 防止重复点击Vue.directive('preventReClick', {inserted (el, binding) {// console.log("binding-7", binding)el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 2000)}})}})}
}

2、在main.js中引入

import Vue from 'vue';
import preventReClick from './preventReClick'Vue.use(preventReClick);

3、在index.vue文件中使用，注意一定要用button按钮

 v-preventReClick="1000"//表示1秒内只能提交一次<button @click="submit" class="submit" v-preventReClick="1000"><p class="submit_text">点击提交</p>
</button>

解决Vue提交按钮重复点击重复提交问题防抖相关推荐

解决vue addRoutes多次添加路由重复问题。
解决vue addRoutes多次添加路由重复问题. 参考文章: (1)解决vue addRoutes多次添加路由重复问题. (2)https://www.cnblogs.com/hsdying/p/ ...
html input提交按钮标签样式,html - 输入类型=“提交”Vs按钮标签是否可以互换？...
html - 输入类型="提交"Vs按钮标签是否可以互换? input type="submit"和button标签是否可以互换? 或者,如果有任何差异,那么何 ...
vue 防止多次点击重复提交v-preventReClick
## main.js //防止多次点击,重复提交 Vue.directive("preventReClick", {inserted(el, binding) {el.addEve ...
提交按钮在form之外的提交方式，提交按钮提交页面任意表单
上结构 <form id="loginForm" action="{:url('Index/add')}" method="post" ...
html提交注册按钮,HTML常用提交按钮
1. 标签=元素 disabled(不可操作) readonly(只读) placeholder(提示文本) autofocus(自动获焦) autocomplete="on(默认.规 ...
html按钮绑定点击事件无效,jquery添加的html元素按钮为何不执行类样式绑定的click事件...
代码举例:jquery 更多按钮:ajax json 点击按钮添加一行文本框和"提交"按钮:(没有问题,能够正常添加)服务器 $(".addMore").cli ...
java提交按钮_java – 允许“Enter”键按提交按钮,而不是仅使用MouseClick
我正在学习Swing类和一切.我有一个玩具程序,我一直在一起提示一个名字,然后提出一个JOptionPane消息"你输入(您的名字)". 我使用的提交按钮只能点击,但我想让它使用输 ...
html中加长提交按钮,HTML input submit提交按钮简介说明
摘要: 下文讲述html代码中input type='submit'时的相关属性简介说明,如下所示: input type='submit' 简介当input标签中 type='submit'时,代 ...
html:(20):使用下拉框进行多选和使用提交按钮提交
使用下拉列表框进行多选下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作 ...

解决Vue提交按钮重复点击重复提交问题防抖

解决Vue提交按钮重复点击重复提交问题防抖相关推荐

最新文章

热门文章