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种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...
随机推荐
- 2.9:数据交换-csv、Excel、json、爬虫、Tushare获取数据
〇.任务 1. 使用Python基础文件读写函数完成CSV文件的处理: 2. 使用标准CSV库完成CSV文件的处理: 3. 使用Excel库完成Excel文件的处理: 4. Python数据结构和Js ...
- Java中将 int[] 数组 转换为 List(ArrayList)
前言 说起数组转换成 ArrayList,很多同学第一反应就是遍历数组,将元素逐个添加到 ArrayList 中,但是这个看着就lower,一般不会这么答. 所以马上就会想到Arrays工具类的 as ...
- python之实现文件的读写
很早之前做自动化测试,并没有将测试数据与数据库关联,而是直接通过json.ymal.excel等文件管理的.那么怎么用python读写文件呢? 在操作文件前,都需要打开文件,打开文件用内置函数open ...
- Jmeter 之在linux中监控Memory、CPU、I/O资源等操作方法
在做性能测试时,单纯的只看响应时间.错误率.中间值远远不够的,有时需要监控服务cpu.内存等指标来判断影响性能的瓶颈在哪. 操作步骤: 一.Linux下配置jmeter环境 1.在linux环境下安装 ...
- python网络爬虫数据解析之正则
本节内容,讲解爬取网络图片,利用正则匹配图片地址 请求网页之后,响应部分内容如下图: 1 时间:2023/1/7 10:42 2 功能描述 3 1.进行指定标签的定位 4 2.标签或者标签对应的属性中 ...
- day04-Vue01
Vue01 1.Vue是什么? Vue(读音/vju:/,类似于view)是一个前端框架,依据构建用户界面 Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或者项目整合 支持和其他类库结合使 ...
- 一文读懂 Kubernetes 存储设计
在 Docker 的设计中,容器内的文件是临时存放的,并且随着容器的删除,容器内部的数据也会一同被清空.不过,我们可以通过在 docker run 启动容器时,使用 --volume/-v 参数来指定 ...
- s2-007
漏洞名称 S2-007 CVE-2012-0838 远程代码执行 利用条件 Struts 2.0.0 - Struts 2.2.3 漏洞原理 age来自于用户输入,传递一个非整数给id导致错误,str ...
- 《Effective C++》模版与泛型编程
Item41:了解隐式接口和编译期多态. 纵使你从未使用过templates,应该不陌生"运行期多态"和"编译期多态"之间的差异.因为它类似于"哪一个 ...
- SPOJ GCDMAT - GCD OF MATRIX
简要题意 给出三个整数 \(T,n,m\),\(T\) 组询问,每组询问给出四个整数 \(i_1,j_1,i_2,j_2\)(数据保证 \(i_1,j_1\leq n\ \ i_2,j_2\leq m ...