本文共 1663 字，大约阅读时间需要 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/