vue防止用户在短时间内快速点击按钮多次

思路：

利用定时器，在一定时间内将按钮禁用，如500ms。

实现：

1、新建全局事件（保证用起来方便，不需要用一次写一次）

新建preventMultiClick.js文件

export default {
  install(Vue) {
    Vue.directive('preventMultiClick', {
      inserted(el_button, bind) {
        el_button.addEventListener('click', () => {
          if (!el_button.disabled) {
            el_button.disabled = true;
            setTimeout(() => {
              el_button.disabled = false
            }, bind.value||500)
          }
        })
      }
    })
  }
}

2、在main.js引入上面新建的js文件

import preventMultiClick from './utils/preventMultiClick';

Vue.use(preventMultiClick)

3、使用

<el-button @click="individual" v-preventMultiClick="5000">点击</el-button>

此处设置时间为5秒，不设置为500ms。

本文链接：https://blog.csdn.net/qq_40934129/article/details/126709236

智能推荐

vue指令实现防止按钮短时间内重复点击

转载自：https://blog.csdn.net/zhj51616/article/details/107089658/ 公司鼠标有问题，经常出现单击一次左键，却触发两次的问题。为了方便自己，就决定加个防多次触发的指令了。最主要是每次出门都忘记拿鼠标了，才不得不将就。 1、自定义指令 src/utils/preventRepeatClick.js 2、main.js文件引用 3、在按钮上直接使用...

按钮在短时间内多次点击只执行一次（暴力点击）问题

本文为博主手写总结性文章，如若涉及版权问题，请与博主联系。关于暴力点击问题解决涉及的主要代码： @property BOOL violentClick; self.violentClick = true; 简单的说明一下思路问题：先定义一个BOOL型的变量，然后设置变量初始化值为true，接下来在点...

Vue中防止短时间内连续点击后多次触发接口（js节流思想）

本人处于前端小白阶段，在做项目的产品模块的时候有时会连续点击提交按钮，导致添加多个重复的产品，刚开始是用disabled限制点击，体验不是太好，偶然在b站上发现一个Js节流视频，但是看得有点云里雾里，所以根据节流的思想自己写了个比较适合我的方法。 ps:这种方法虽然很好，但是遇到请求超时的情况可能不是太好处理（网络原因、数据太大）。考虑通过后端是否返回res来控制。方法还有待提高！仅供参考，嘻嘻嘻...

Vue 前端框架中限制用户短时间内多次点击同一按钮的方法（例如：登录、注册）

Vue 前端框架中限制用户短时间内多次点击同一按钮的方法（例如：登录、注册）一、首先在项目目录（自定义）下创建'controlClickState.js'文件，后在文件中定义如下内容：二、在项目目录下的 main.js 入口文件引用定义好的 'controlClickState.js'文件三、在需要限制点击频率的组件中使用参考博客一、首先在项目目录（自定义）下创建’contr...

防止短时间内频繁点击

Android防止短时间内频繁点击工具类使用方法：...

代码先锋网代码片段及技术文章聚合