第一章 前言
相信很多小伙伴會在各個渠道上搜如何防止重復點擊，之后會推薦什么防抖、節流來避免這一操作，該方法小編就不繼續往下說了。接下來說說小編的場景，項目已經完成的差不多了，但是由于之前大家都是直接點擊事件調用方法的，導致用戶頻繁點擊就會一直調用接口，從而導致不可避免的操作，如果使用防抖節流，小編發現必須在每一個用到按鈕的頁面導入、再使用等等感覺有點麻煩，于是小編想了想能不能在全局上就處理，經過小編的思考，于是最終選擇利用vue的自定義指令實現！官方文檔如下：
自定義指令 | Vue.js
源碼如下：
第二章 源碼
- 創建directive文件夾：
index文件是根目錄，其他文件是你最終寫的每一個自定義指令。
- reClick.js文件? 防止重復點擊方法，自定義指令?
// 通過控制元素的是否禁用，防止用戶在一段時間內不可點擊，從而防止重復點擊
export default {mounted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {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）
)
