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种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...
随机推荐
- Java工厂模式的最佳实践?
"Simplicity is prerequisite for reliability." - Edsger Dijkstra "简单是可靠的前提条件." -- ...
- 使用 Visual Studio 2022 调试Dapr 应用程序
使用Dapr 编写的是一个多进程的程序,使用Visual Studio 调试起来可能会比较困难,因为 Visual Studio 默认只会把你当前设置的启动项目的启动调试. 好在有Visual Stu ...
- 静态文件配置 django连接MySQL django模型层初识 ORM基本语句
目录 静态文件配置 1. 问题描述 2. 静态文件 3. 资源访问 form表单属性补充 action method 请求方法 get请求 post请求 views层 request对象 reques ...
- ORM常用字段与参数(自定义字段)
目录 一:orm中常用字段及参数 1.说明 2.自定义字段使用 3.ORM字段参数 一:orm中常用字段及参数 1.说明 id字段是自动添加的,如果你想要指定自定义主键,只需在其中一个字段中指定pri ...
- 学习ASP.NET Core Blazor编程系列十七——文件上传(上)
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
- table表格的合并
如上图,实现单元格合并功能,不多说,直接上代码 一,添加 :span-method="objectSpanMethod" <el-table :key="ti ...
- VUE 使用md5对用户登录密码进行加密传输
VUE 使用md5对用户登录密码进行加密传输到数据库 前言 第一步 npm下载js-md5依赖包 第二步 引入js-md5 直接在需要使用md5加密的页面引入 全局挂载,将js-md5添加到vue原型 ...
- nuxt.js框架 如何打包 build
nuxt脚手架开发好项目后怎么打包 以下是脚手架的package.json部分代码 "scripts": { "dev": "cross-env NO ...
- AcWing786.第k个数
题目描述 给定一个长度为 \(n\) 的整数数列,以及一个整数 \(k\),请用快速选择算法求出数列从小到大排序后的第 \(k\) 个数. 输入格式 第一行包含两个整数 \(n\) 和 \(k\). ...
- k3s安装kubernetes环境
官方文档:https://docs.rancher.cn/k3s/ 官方文档:https://rancher.com/docs/k3s/latest/en/installation/install-o ...