Vue 禁止按钮多次点击 重复提交数据(指令实现)
全局定义,方便调用
新建plugins.js

export default {
install (Vue) {
// 防重复点击(指令实现)
Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
}
}

在main.js引用
按钮调用直接加v-preventReClick
<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick></el-button>
亲测可用
Vue 禁止按钮多次点击 重复提交数据(指令实现)的更多相关文章
- web开发中禁止因为网速慢导致重复提交数据
var checkSubmitFlg = false; function check() { if (!checkSubmitFlg) { ...
- PHP防止页面刷新、重复提交数据
PHP防止页面刷新.重复提交数据 (2011-12-09 16:52:45) 转载▼ 标签: it 分类: php技术相关 闲来无事看了一下php session ,又在网上看了防止页面刷新重复提交数 ...
- yii防止延迟用户多次点击按钮重复提交数据
是不是被用户的行为所困扰? 一. 一个表单用户点击提交按钮了N次,这也导致了数据提交了N次. 为了此受到了测试的欺辱,受到了老板的批评? 不用怕,它就是来拯救你的. 第一步:打开命令行,敲入 comp ...
- php防止浏览器点击返回按钮重复提交数据
<!--html中存放隐藏域数据--> <input type="hidden" value='{$sun_nums}' name='sub_nums' /> ...
- layUI form表单 防止多次点击重复提交
//监听 弹框-变更处理备注-提交 form.on('submit(popFormSubPass)', function (data) { //防止重复点击: 单击之后提交按钮不可选,防止重复提交 v ...
- 页面按F5重复提交数据解决方法
在Web开发中,必须面对的问题就是表单的重复提交问题(这里仅指F5刷新造成的重复提交),.NET中处理这个问题似乎没有什么好的方法. 在网上搜索得到的解决方法主要有两种,一种是直接让表单按钮失效,从而 ...
- .NET防止重复提交数据
最近在做一个销售系统的时候,操作人员提交数据的时候数据库竟然会出现多条数据相同的记录,并且是在1秒之内,客户反馈给我们,第一反应是重复提交的问题,检查了下代码,程序执行完成后应该是跳转到别的页面的,可 ...
- VB.Net中点击按钮(Button)会重复提交两次表单
在VB.NET程序开发过程中遇到一个问题 提交一个表单时,button的html代码如下 <asp:Button ID="btnSubmit" OnClick="c ...
- $.ajax防止多次点击重复提交的方法
第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法:$.ajaxPrefilter()方 ...
- ASP.NET防止连续多次点击提交按钮 导致页面重复提交
PS:实际使用中发现,第①种方法在火狐浏览中有时候有问题.第2种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...
随机推荐
- jQuery使用 前端框架Bootstrap
目录 jQuery查找标签 1.基本选择器 2.组合选择器 3.后代选择器 4.属性选择器 5.基本筛选器 7.筛选器方法 链式操作的本质 操作标签 1.class操作 2.位置操作 3.文本操作 4 ...
- ClickHouse入门教程
目录 什么是ClickHouse? OLAP场景的关键特征 列式数据库更适合OLAP场景的原因 输入/输出 CPU ClickHouse的特性 真正的列式数据库管理系统 数据压缩 数据的磁盘存储 多核 ...
- webShell攻击及防御
最近公司项目也是经常被同行攻击,经过排查,基本定位都是挂马脚本导致,所以针对webShell攻击做一下记录. 首先简单说下 什么是webShell? 利用文件上传,上传了非法可以执行代码到服务器,然后 ...
- python 中变量的命名规则与注释
变量命名规则 1.变量名必须是大小写英文字母.数字或下划线 _ 的组合,不能用数字开头,并且对大小写敏感 2.关键字不能用于命名变量,关键字一共有35个,以下为关键字的获取 注释 代码注释提高了代码的 ...
- Jmeter 之 If 逻辑控制器
在Jmeter 中如要在某种场景中才执行特殊请求,此时可用If 逻辑控制器来实现. If 逻辑控制器顾名思义当符合某个条件时则执行,添加路径:测试计划->线程组->逻辑控制器->if ...
- javascript计算器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 2、Navicat安装提示报错
问题描述:激活navicat15的注册码时报出"rsa public key not find"错误原因:没有生成破解版的RegPrivateKey.pem文件解决方案:重新安装N ...
- P1024 [NOI2001] 食物链【种类并查集】
题意 P1024 简化题意:给定 \(n\) 和 \(k(n\leqslant5\times10^4,k\leqslant10^5)\) ,表示有 \(n\) 个动物, \(k\) 个描述,其中: \ ...
- Request.Form&Request.QueryString实现伪ajax的效果
1.问题描述 最近一直在搞公司老系统的需求开发,前端是asp,后端的vb.碰到了一个需求,是做一个"日志查询"功能,查询条件为:时间&操作人. 原本我的设计思路是异步查询, ...
- [编程基础] C++多线程入门3-小心地将参数传递给线程
原始C++标准仅支持单线程编程.新的C++标准(称为c++11或c++0x)于2011年发布.在c++11中,引入了新的线程库.因此运行本文程序需要C++至少符合c++11标准. 文章目录 3 小心地 ...