本文共 1709 字，大约阅读时间需要 5 分钟。

Vue.js 防重复点击 指令开发实践

在开发中，尤其是涉及按钮点击事件的场景，防止重复点击是一个常见需求。本文将介绍三种实现 Vue.js 防止重复点击的方法，并结合常见用法进行详细说明。

方法一：common.js 实现

import Vue from 'vue';
export 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);
      }
    });
  }
});

2. 在需要使用的 Vue 组件中引入 方程

方法二：plugins.js 实现

3. 创建新建 plugins.js 文件

export default {
  install(Vue) {
    // 防重复点击（指令实现）
    Vue.directive('preventReClick', {
      inserted: function (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 3000);
          }
        });
      }
    });
  }
};

2. 在主应用入口文件（如 main.js）引用

import preventReClick from './plugins';
Vue.use(preventReClick);

3. 按需在对应组件中添加 指令

      
       导出
      

方法三：clickStatefrom.js 实现

4. 创建 clickStatefrom.js 文件，提供全局指令

export default {
  install(Vue) {
    Vue.directive('preventClick', {
      inserted: function (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, 6000);
          }
        });
      }
    });
  }
};

2. 在 main.js 中引用

import preventClick from './utils/clickStatefrom';
Vue.use(presentClick);

3. 在需要使用的组件中添加 v-preventClick

        
         保存
        

以上三种方法均可实现对按钮点击事件的防重复控制，每种方法适合不同场景。方便扩展和维护，结合实际项目需求选择合适方案即可。

转载地址：http://tlwlz.baihongyu.com/