vue3: directive自定义指令防止重复点击

第一章 前言

相信很多小伙伴会在各个渠道上搜如何防止重复点击，之后会推荐什么防抖、节流来避免这一操作，该方法小编就不继续往下说了。接下来说说小编的场景，项目已经完成的差不多了，但是由于之前大家都是直接点击事件调用方法的，导致用户频繁点击就会一直调用接口，从而导致不可避免的操作，如果使用防抖节流，小编发现必须在每一个用到按钮的页面导入、再使用等等感觉有点麻烦，于是小编想了想能不能在全局上就处理，经过小编的思考，于是最终选择利用vue的自定义指令实现！官方文档如下：

自定义指令 | Vue.js

源码如下：

第二章 源码

• 创建directive文件夹：

index文件是根目录，其他文件是你最终写的每一个自定义指令。

• reClick.js文件  防止重复点击方法，自定义指令 

// 通过控制元素的是否禁用，防止用户在一段时间内不可点击，从而防止重复点击
export default {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 500)
      }
    })
  }
}

• index.js文件 引入多种自定义指令，包括防止重复点击指令 

import reClick from './reClick'
//引入其他指令
/**
 * 导出指令方法：v-xxx
 * @methods reClick 防止重复点击，用法：v-reClick
 */
export function directive(app) {
  //连续点击指令 v-reClick默认0.5秒不能连续点击,可自定义v-reClick="1000"
  app.directive('reClick', reClick)
}

• main.js全局引入 

import App from './App.vue';
import { directive } from '@/directive/index.js' //引入自定义指令
const app = createApp(App)
directive(app) //全局引入

• vue文件使用

<a-button type="primary" v-reClick>查询</a-button>
<a-button v-reClick="1000">重置</a-button>
<a-button v-reClick="2000">重置</a-button>

• 最终实现效果：（禁用后即使点击也不会再触发我们的点击事件）

• 局限：使用该方法之后只能做到用户在该段事件内不能再次点击，如果在数据请求中，后端接口请求特别慢，在该段时间内按钮又可以二次点击（解决方案：配合全局loading或者添加标记在接口返回后我们再释放el.disabled = false）