全局定义,方便调用

新建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】【BFS】【队列】2021年12月5日-199. 二叉树的右视图

    解答: /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * ...

  2. python2和python3的区别(1)

    1.python2和python3的解释器的默认编码不同 python2解释器的编码默认用的是 ascii python3解释器的编码默认用的 utf-8 2.python2和python3输入的表示 ...

  3. Go语言性能剖析利器--pprof实战

    作者:耿宗杰 前言 关于pprof的文章在网上已是汗牛充栋,却是千篇一律的命令介绍,鲜有真正实操的,本文将参考Go社区资料,结合自己的经验,实战Go程序的性能分析与优化过程. 优化思路 首先说一下性能 ...

  4. des_招标

    网站 aHR0cHM6Ly9jdGJwc3AuY29tLyMv 翻到第二页,加载了一个2,并且返回的都是加密的数据  点到initiator,可以看到发送的Axios请求,尝试全局搜索intercep ...

  5. 关于 MySQL 嵌套子查询中,无法关联主表字段问题的折中解决方法

    今天在工作中写项目的时候,遇到了一个让我感到几乎无解的问题,在转换了思路后,想出了一个折中的解决方案,记录如下. 其实,问题的场景,非常简单: 就是需要查询出上图的数据,红框是从 项目产品表 中查询的 ...

  6. Zookeeper详解(02) - zookeeper安装部署-单机模式-集群模式

    Zookeeper详解(02) - zookeeper安装部署-单机模式-集群模式 安装包下载 官网首页:https://zookeeper.apache.org/ 历史版本下载地址:http://a ...

  7. 迁移学习(IIMT)——《Improve Unsupervised Domain Adaptation with Mixup Training》

    论文信息 论文标题:Improve Unsupervised Domain Adaptation with Mixup Training论文作者:Shen Yan, Huan Song, Nanxia ...

  8. 树形 dp 与树上问题

    NFLS 集训笔记 20220802 - 树形 dp 进阶与树上问题综合 \(\text{By DaiRuiChen007}\) I. 洛谷[P2585] - 三色二叉树 \(\text{Link}\ ...

  9. SQL中常用函数操作

    --在SQL SERVER中批量替换字符串的方法 update [Table] set [Field] = REPLACE([Field],'被替换的原内容','要替换的内容') update HBb ...

  10. OpenStack命令行参考

    OpenStack命令行参考 hello,大家好,这里是费冰.在使用OpenStack的过程中,固然我们可以通过 web 页面完成绝大多数的操作,但作为管理人员,不能不知晓 OpenStack 命令行 ...