全局定义,方便调用

新建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. 《MySQL必知必会》知识汇总一

    一.使用MYSQL 展示所有数据库 show databases; 选择数据库 use crashcourse; 展示该数据库中所有的表 show tables; 还可以展示表列的shema约束 sh ...

  2. 4.11:Storm之WordCount

    〇.概述 1.拓扑结构 2.目标 使用storm进行计数实验. 一.启动服务   在网页中输入:http://localhost:8081可以查看storm的相关信息. 二.kafka操作 终端中输入 ...

  3. 【Zookeeper】结构、应用、安装部署与参数、客户端命令行操作、API应用、内部原理(选举机制、写数据、监听器)

    一.Zookeeper入门 1.概述 分布式服务管理框架(存储和管理数据) Zookeeper=文件系统+通知机制 2.特点 主从集群 半数以上,正常工作 请求顺序执行 数据更新具有原子性 3.数据结 ...

  4. 上传文件到阿里云 oss,前端 browser.js 笔记

    Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器,应用服务器再把文件上传到OSS. 和数据直传到OSS相比,有以下缺点 上传慢:用户数据需先上传到应用服务器,之后再上传到OSS 费用 ...

  5. Codeforces Round #838 (Div. 2) D. GCD Queries

    题意 有个长度为n的排列p,[0,1,2,...n-1],你可以进行至多2*n次询问,每次询问两个i,j,返回gcd(pi,pj),让你在规定时间内猜出0在哪两个位置之一 思路 这是一道交互题,询问的 ...

  6. MongoDB - 模式设计

    注意事项 模式设计,即在文档中表示数据的方式,对于数据表示来说时非常关键的. 为 MongoDB 做模式设计时,在性能.可伸缩性和简单性方面是重中之重,也需要考虑一些特别的注意事项. 限制条件 与常见 ...

  7. python进阶之路15 之异常处理、生成器相关

    异常捕获处理 1.异常 异常就是代码运行报错 行业术语叫bug 代码运行中一旦遇到异常会直接结束整个程序的运行 我们在编写代码的过程中要尽可能避免 2.异常分类 语法错误 不允许出现 一旦出现立刻改正 ...

  8. day09-AOP-02

    AOP-02 4.问题提出 在上一篇的MyProxyProvider类中,我们的输出语句功能比较弱,在实际开发中,我们希望是以一个方法的形式,嵌入到真正执行的目标方法前,怎么办? 1.使用土方法解决 ...

  9. Windows安装Anaconda并且配置国内镜像教程

    前言 我们在学习 Python 的时候需要不同的 Python 版本,关系到电脑环境变量配置换来换去很是麻烦,所以这个时候我们需要一个虚拟的 Python 环境变量,我之前也装过 virtualenv ...

  10. webpack配置less以及js中引入的图片问题

    1.问题重现 当我做了这个配置以后,发现less里的图片可以正常展现到页面,但是js里的图片以及其他文件都不能正常展现,都报404 原始配置如下: // 如果有額外的.babelrc配置的話就可以使用 ...