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种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...
随机推荐
- 【Linux】个人笔记本安装Centos并开放22端口供外网连接
〇.参考资料 一.配置及安装内容 (一)配置 [today]低配笔记本(装centos):4+500G 个人电脑(装三个节点的虚拟机集群环境):8+628G (二)所装软件 Linux系统(可选cen ...
- 4.1IDA基础设置--《恶意代码分析实战》
1.加载一个可执行文件 ① 选项一:当加载一个文件(如PE文件),IDA像操作系统加载器一样将文件映射到内存中. ② 选项三:Binary File:将文件作为一个原始的二进制文件进行反汇编,例如文件 ...
- js迭代循环
一.for loop for (let i = 0; i < products.length; i++) { console.log(products[i]); } 支持循环中断,可以用brea ...
- uniapp vue3下的代理转发不生效问题,亲测有效解决
以前配置过vue vite 的代理转发,没想到在uniapp的代理转发下翻车了,其实是一个很小的问题.调试过程中,尝试了webpack.vite 等写法 在根目录下 创建了 vite.config.j ...
- python基础语法&数据类型&运算符
1.标识符 # -*- coding:utf-8 -*- # @Time :2021/1/16 10:28 # @Author :QAbujiaban # @Email :wbxztoo@163.co ...
- ArcObjects SDK开发 021 开发框架搭建-FrameWork包设计
1.框架引擎部分 引擎模块其实就是之前我们说的App-Command-Tool模块,通过这个模块,把系统的主干框架搭建起来. 其中大部分出现在菜单以及工具条上的按钮都会继承这个框架定义ICommand ...
- JUC源码学习笔记7——FutureTask源码解析,人生亦如是,run起来才有结果
系列文章目录和关于我 一丶我们在哪里会使用到FutureTask 基本上工作中和Future接口 打交道比较多,比如线程池ThreadPoolExecutor#sumbit方法,返回值就是一个Futu ...
- Spring Boot通过Actuator显示git和build的信息
1 简介 为了更好的版本控制和问题定位,我们需要知道正在运行的应用是什么版本,什么时候打包的,Git的相关信息等.通过/actuator/info可以帮助我们获取这些信息. 2 配置 首先要有actu ...
- 经典问题 1 —— DAG 上区间限制拓扑序
问题描述 给定一个 DAG,求一个拓扑序,使得节点 \(i\) 的拓扑序 \(\in [l_i,r_i]\). 题解 首先进行一个预处理:对于所有 \(u\),令 \(\forall (v,u)\in ...
- ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目
Capacitor是什么? Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android.iOS.Electron和Web应用程序. Capacitor是A ...