1.添加自定义文件 preventReClick.js

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
}); export { preventReClick }

2.在main.js中引用

import preventReClick from './store/preventReClick' //防多次点击,重复提交

3.实现方式。在按钮上添加v-preventReClick

<el-button type="primary" @click="handleImportTable" v-preventReClick>确 定</el-button>

VUE防止多次点击,重复请求的更多相关文章

  1. vue路由跳转取消上个页面的请求和去掉重复请求

    vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求

  2. Vue中断axios请求-切换页面+重复请求

    切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...

  3. vue axios路由跳转取消所有请求 和 防止重复请求

    直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...

  4. iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)

    一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...

  5. 使用fiddler模拟重复请求接口

    使用fiddler模拟重复请求接口 重复请求某个接口,比如评论一条,这样点击多次就可以造多个评论数据

  6. ASP.NET WebApi服务接口如何防止重复请求实现HTTP幂等性

    一.背景描述与课程介绍 明人不说暗话,跟着阿笨一起玩WebApi.在我们平时开发项目中可能会出现下面这些情况; 1).由于用户误操作,多次点击网页表单提交按钮.由于网速等原因造成页面卡顿,用户重复刷新 ...

  7. EasyUI中那些不容易被发现的坑——EasyUI重复请求2次的问题

    问题控件:datagrid.combobox.所有能设置url属性的控件 问题版本:1.4.4.1.4.5(之前的版本没测) 问题如图: 重复请求2次,错误代码如图: 错误问题分析:html加载的时候 ...

  8. spring 注解重复(防重复请求)

    1.配置拦截器 spring-mvc.xml <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/ ...

  9. layui之初始化加分页重复请求问题解决

    layui框架中的page困扰我很久,一个页面初始化后并且分页,导致初始化渲染请求一次,分页再请求了一次,一个接口就重复请求了2次,通过不停的分析和测试,最终解决了这个问题. 基于JQ的ajax二次封 ...

  10. react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路

    一.react-navigation的初使用 createStackNavigator  ==> createSwitchNavigator  ==>  createAppContaine ...

随机推荐

  1. OS-HACKNOS-2.1靶机之解析

    靶机名称 HACKNOS: OS-HACKNOS 靶机下载地址 https://download.vulnhub.com/hacknos/Os-hackNos-1.ova 实验环境 : kali 2. ...

  2. DTSE Tech Talk | 第10期:云会议带你入门音视频世界

    摘要:本期直播主题是<云会议带你入门音视频世界>,华为云媒体服务产品部资深专家金云飞,与开发者们交流华为云会议在实时音视频行业中的集成应用,帮助开发者更好的理解华为云会议及其开放能力. 本 ...

  3. CPU cache知识 —— ARM架构cache结构和细节

    cache如何寻址 处理器访问cache时,cache电路会将CPU地址进行解码,分成3个部分,分别是: offset: 用于某个cache line -- 字抽取: index: 用于匹配某个cac ...

  4. IIS部署WebApi跨域不生效

    在IIS8.5上部署了WebApi程序,但是跨域不生效检查了前端和后端都没有问题. 后面才发现在应用程序池中需要设置为集成模式.经典模式下不能正常使用

  5. c++ const和指针

    const int *p: 定义指针,指向的变量的值不能修改(指向整型常量或普通整型,但值不能通过指针修改) int const *p: 同上 int * const p=&a: 一直指向a, ...

  6. SerialException:Cannot configure port something went wrong

    完整报错 SerialException:Cannot configure port something went wrong, Original message: OSError(22, '参数错误 ...

  7. python3的可迭代对象与迭代器对象

    可迭代对象与迭代器对象 通过一段简单的代码来理解这俩个概念 a = [1,2,3,4] for i in a: print(i) 这段代码很简单, 对 a 这个列表进行遍历, 然后打印输出每个元素, ...

  8. Go 每日一库之 go-carbon,优雅的golang日期时间处理库

    Carbon 是一个轻量级.语义化.对开发者友好的 golang 时间处理库,支持链式调用. Carbon 已被 awesome-go 收录, 如果您觉得不错,请给个 star 吧. github.c ...

  9. Mqttnet内存与性能改进录

    1 MQTTnet介绍 MQTTnet是一个高性能的 .NET MQTT库,它提供MQTT客户端和MQTT服务器的功能,支持到最新MQTT5协议版本,支持.Net Framework4.5.2版本或以 ...

  10. SQLMap入门——获取表中的字段名

    查询表名之后,查询表中的字段名 python sqlmap.py -u http://localhost/sqli-labs-master/Less-1/?id=1 -D xssplatform -T ...