全局定义,方便调用

新建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 禁止按钮多次点击 重复提交数据(指令实现)的更多相关文章

  1. web开发中禁止因为网速慢导致重复提交数据

    var checkSubmitFlg = false;  function check() {                if (!checkSubmitFlg) {                ...

  2. PHP防止页面刷新、重复提交数据

    PHP防止页面刷新.重复提交数据 (2011-12-09 16:52:45) 转载▼ 标签: it 分类: php技术相关 闲来无事看了一下php session ,又在网上看了防止页面刷新重复提交数 ...

  3. yii防止延迟用户多次点击按钮重复提交数据

    是不是被用户的行为所困扰? 一. 一个表单用户点击提交按钮了N次,这也导致了数据提交了N次. 为了此受到了测试的欺辱,受到了老板的批评? 不用怕,它就是来拯救你的. 第一步:打开命令行,敲入 comp ...

  4. php防止浏览器点击返回按钮重复提交数据

    <!--html中存放隐藏域数据--> <input type="hidden" value='{$sun_nums}' name='sub_nums' /> ...

  5. layUI form表单 防止多次点击重复提交

    //监听 弹框-变更处理备注-提交 form.on('submit(popFormSubPass)', function (data) { //防止重复点击: 单击之后提交按钮不可选,防止重复提交 v ...

  6. 页面按F5重复提交数据解决方法

    在Web开发中,必须面对的问题就是表单的重复提交问题(这里仅指F5刷新造成的重复提交),.NET中处理这个问题似乎没有什么好的方法. 在网上搜索得到的解决方法主要有两种,一种是直接让表单按钮失效,从而 ...

  7. .NET防止重复提交数据

    最近在做一个销售系统的时候,操作人员提交数据的时候数据库竟然会出现多条数据相同的记录,并且是在1秒之内,客户反馈给我们,第一反应是重复提交的问题,检查了下代码,程序执行完成后应该是跳转到别的页面的,可 ...

  8. VB.Net中点击按钮(Button)会重复提交两次表单

    在VB.NET程序开发过程中遇到一个问题 提交一个表单时,button的html代码如下 <asp:Button ID="btnSubmit" OnClick="c ...

  9. $.ajax防止多次点击重复提交的方法

    第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法:$.ajaxPrefilter()方 ...

  10. ASP.NET防止连续多次点击提交按钮 导致页面重复提交

    PS:实际使用中发现,第①种方法在火狐浏览中有时候有问题.第2种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...

随机推荐

  1. 【每日一题】【树的dfs递归,返回多次,注意都遍历完后才最终返回】2022年1月6日-112. 路径总和

    给你二叉树的根节点 root 和一个表示目标和的整数 targetSum .判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum .如果存在,返回 tr ...

  2. python模块/导入模块

    索引取值与迭代取值的差异 l1 = [1,2,3,4,5] 1.索引取值 可以任意位置任意次数的取值 不支持无序类型的数据取值 print(l1[3]) print(l1[3]) #可以直接获取任意位 ...

  3. Linux 常用命令(持续更新)

    Linux常用命令介绍(备查) *所有的命名都可以用 命令 --help/man 命令 查看使用说明 1.pwd 显示当前路径 2.dir 和 ls用法一样 都是列出当前路径下的文件(不包括隐藏文件) ...

  4. JVM常用调优参数

    目录 JVM内存模型及常用参数 参数解释 垃圾收集器 Serial收集器(-XX:+UseSerialGC -XX:+UseSerialOldGC) Parallel Scavenge收集器(-XX: ...

  5. Vuex从入门到精通

    一.vuex介绍 目标 什么是Vuex 为什么学习Vuex 通信方案 组件关系 数据通信 父子关系 父传子:props : 子传父:$emit 非父子关系 vuex (一种组件通信方案) Vuex是什 ...

  6. 从源码层面深度剖析Spring循环依赖

    作者:郭艳红 以下举例皆针对单例模式讨论 图解参考 https://www.processon.com/view/link/60e3b0ae0e3e74200e2478ce 1.Spring 如何创建 ...

  7. XCTF分站赛ACTF——Crypto

    impossible RSA: 没啥好说的,跟我之前文章有道题类似,虽然如此还是花费了很长时间,原因令人落泪,把q = inverse(e,p)的数学式写成了eq mod p导致数学式推导及其困难(能 ...

  8. Windows 11 内核新调试器「GitHub 热点速览 v.23.01」

    本周热点趋势榜虽然新项目不多,但是还是有几个不错值得收藏的工具项目,比如用来做文本转语音的 tortoise-tts 能生成更加贴近真实人声的语音,让 Golang 并发更出色的 conc,以及通过 ...

  9. P5687 [CSP-S2019 江西] 网格图

    题面 给定一个 \(n\times m\) 的网格图,行从 \(1\sim n\) 编号,列从 \(1\sim m\) 编号,每个点可用它所在的行编号 \(r\) 与所在的列编号 \(c\) 表示为 ...

  10. spark RPC超时造成任务异常 Attempted to get executor loss reason for executor id 17 at RPC address 192.168.48.172:59070, but got no response. Marking as slave lost.

    日志信息如下 Attempted to get executor loss reason for executor id 17 at RPC address 192.168.48.172:59070, ...