Vue全局配置按钮防止被重复点击，请使用第三种全局配置，简单有效-白红宇

Vue全局配置按钮防止被重复点击，请使用第三种全局配置，简单有效

阅读量：638 次

发布时间：2019-03-14

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

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

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

方法一：common.js 实现

在 common.js 中导入 Vue 并创建 preventReClick 指令

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);      }    });  }});

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

方法二：plugins.js 实现

创建新建 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);          }        });      }    });  }};

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

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

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


      
       导出

方法三：clickStatefrom.js 实现

创建 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);          }        });      }    });  }};

在 main.js 中引用

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

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


        
         保存

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

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

你可能感兴趣的文章