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

第一章 前言

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

自定义指令 | Vue.js

源码如下:

第二章 源码

  • 创建directive文件夹:

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

  • reClick.js文件 防止重复点击方法,自定义指令
javascript 复制代码
// 通过控制元素的是否禁用,防止用户在一段时间内不可点击,从而防止重复点击
export default {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 500)
      }
    })
  }
}
  • index.js文件 引入多种自定义指令,包括防止重复点击指令
javascript 复制代码
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全局引入
javascript 复制代码
import App from './App.vue';
import { directive } from '@/directive/index.js' //引入自定义指令
const app = createApp(App)
directive(app) //全局引入
  • vue文件使用
html 复制代码
<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)
相关推荐
yuluo_YX10 分钟前
使用 Spring AI Aliabab Module RAG 构建 Web Search 应用
前端·人工智能·spring
冴羽11 分钟前
SvelteKit 最新中文文档教程(16)—— Service workers
前端·javascript·svelte
Hongwen100121 分钟前
寒冬之中的AI创意实验:48小时左右从零打造吉卜力风格AI绘图网站
前端·后端·cursor
小鸭呱呱呱32 分钟前
【CSS】- 表单控件的 placeholder 如何控制换行显示?
前端·javascript·css·深度学习·面试·职场和发展·html
程序猿大波1 小时前
基于Java,SpringBoot,Vue,HTML高校社团信息管理系统设计
java·vue.js·spring boot
小浣熊喜欢揍臭臭1 小时前
vue+webpack5(高级配置)
前端·javascript·vue.js
Bigger1 小时前
Tauri(十七)—— 安装包和应用包的区别
前端·app·mac
茉莉蜜茶only1 小时前
【前端实习岗位】淘天集团2026届春季实习生招聘
前端·招聘
Book_熬夜!1 小时前
Vue2——组件的注册与通信方式、默认插槽、具名插槽、插槽的作用域
前端·javascript·vue.js·前端框架·ecmascript
夕水1 小时前
后端说,这个超大数字idxxx会变成xxx,让我知道了js的一个陷阱
前端