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）