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种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...
随机推荐
- 【Day03】Spring cloud:源码讲解与容器化初探
今日内容 原理和源码 容器化过度 一.Naocs 1.介绍 server端 启动入口类(Spring Boot项目,提供8848端口的监听访问) 源码包含InstanceController类(ser ...
- 使用WPF或AspNetCore创建简易版ChatGPT客户端,让ChatGPT成为你的私人助理
前言:前一天写的一个ChatGPT服务端,貌似大家用起来还不是那么方便,所以我顺便用WPF和AspNetCore的webapi程序做个客户端吧,通过客户端来快速访问chatgpt模型生成对话. 1 ...
- flutter系列之:移动端手势的具体使用
目录 简介 赋予widget可以点击的功能 会动的组件 可删除的组件 总结 简介 之前我们介绍了GestureDetector的定义和其提供的一些基本的方法,GestureDetector的好处就是可 ...
- [数据与分析可视化] D3入门教程3-d3中的数据操作
d3.js入门教程3-d3.js中的数据操作 文章目录 d3.js入门教程3-d3.js中的数据操作 数学操作 对象和数组 过滤Filtering 排序Sorting 映射group 循环loop 重 ...
- day01-ES6新特性
ES6新特性 1.ES6是什么? DCMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月发布 ES6设计目标:达到JavaScript语言可以用来编写复杂 ...
- 通过Docker启动Solace,并在Spring Boot通过JMS整合Solace
1 简介 Solace是一个强大的实时性的事件驱动消息队列.本文将介绍如何在Spring中使用,虽然代码使用的是Spring Boot,但并没有使用相关starter,跟Spring的整合一样,可通用 ...
- 推荐一款在浏览器编辑`Blazor`的`IDE`
不知道是否有Blazor用户羡慕过React或者Vue用户,在一些组件库中,它们就提供了在当前的组件预览对于组件的实时编辑并且预览? 比如semi-design的这种 在比如codepen这种 由于B ...
- Docker使用阿里云拉取配置源也无法拉取的镜像-github镜像镜像gcr.io
我搞了一天都没搞好,最后用了这个办法解决了拉取镜像的问题 对于大部分镜像来说,我们配置源就可以,但是对于较新的镜像,没得搞啊,铁子们,真的崩溃... 最终发现可以通过Aliyun的自动构建来处理被墙镜 ...
- JS循环类数组对象,获得页面所有的某个ClssaName,处理它的属性
举例:获得所有的某个ClssaName,处理它的第一个子元素中的title赋值给内容 let links = Array.from(document.getElementsByClassName('m ...
- 在函数中设置input的multiple属性以及input的点击事件时,设置失效
1.在函数中先设置input文件可以多选,然后再设置input框的点击事件情况下,有时候这个多选设置会失效. 我们可以采用下面的方式去解决 <input ref="myInputRef ...