全局定义,方便调用

新建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. Java基础知识篇【gitee】

    https://snailclimb.gitee.io/javaguide 一.Java基本功 Java一次编译,字节码通过JVM,处处运行jsp会转化为servlet,也要由jdk编译OracleJ ...

  2. PHP7.2 装mongodb 遇到的坑,完美解决!

    公司要做QA安全测试,组长就丢了一个源码包给我,什么资料都无. 系统是个Laravel框架,源码都是从线上git下来.然后看了本地composer.json 没有生成vendor 第一步安装 comp ...

  3. 过debugger的几种方法+案例

    受益匪浅 https://mp.weixin.qq.com/s/559so0RheeiQdA670J23yghttps://blog.csdn.net/weixin_43834227/article/ ...

  4. TypeScript 前端工程最佳实践

    作者:王春雨 前言 随着前端工程化的快速发展, TypeScript 变得越来越受欢迎,它已经成为前端开发人员必备技能. TypeScript 最初是由微软开发并开源的一种编程语言,自2012年10月 ...

  5. 前端必备ps切图方法,拿下ui设计师就靠它了。

    方法1(图层切图): 点击源psd文件中需要的图片,右击鼠标选择导出为png,保存即可.图片与文字在两个或两个以上图层上的时候,按住Control选择多个图层,右键选择合并图层(快捷键:Control ...

  6. js 禁用刷新快捷键

    // 上代码 /** * 按键监听 * Ctrl-17,F5-116,R-82 */ var oldKeyCode = -1; document.onkeydown = function (e) { ...

  7. 高并发解决方案orleans实践

    开具一张图,展开来聊天.有从单个服务.consul集群和orleans来展开高并发测试一个小小数据库并发实例. 首先介绍下场景,创建一个order,同时去product表里面减掉一个库存.很简单的业务 ...

  8. python进阶之路11 闭包函数 装饰器

    函数名的多种用法 函数名其实绑定的也是一块内存地址 只不过该地址里面存放的不是数据值而是一段代码 函数名加括号就会找到该代码并执行 1.可以当作变量名赋值 def index():pass res = ...

  9. 如何通过Java代码在PDF中插入、替换或删除图像?

    图文并茂的内容往往让人看起来更加舒服,如果只是文字内容的累加,往往会使读者产生视觉疲劳.搭配精美的文章配图则会使文章内容更加丰富,增加文章可读性的同时,也能提升用户体验.但由于PDF文档安全性较高,不 ...

  10. 算法学习笔记(5): 最近公共祖先(LCA)

    最近公共祖先(LCA) 目录 最近公共祖先(LCA) 定义 求法 方法一:树上倍增 朴素算法 复杂度分析 方法二:dfs序与ST表 初始化与查询 复杂度分析 方法三:树链剖分 DFS序 性质 重链 重 ...