Vue3项目自定义全局防抖节流

1. 先创建一个debounce.ts

typescript 复制代码
export default {
    //自定义防抖操作
    preventReClick: {
        mounted(el: { addEventListener: (arg0: string, arg1: () => void) => void; disabled: boolean }, binding: { value: any }) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true
                    setTimeout(() => {
                        el.disabled = false
                    }, binding.value || 2000) //2000ms间隔时间
                }
            })
        }
    }
}

在全局注册指令

typescript 复制代码
import dir from "./composables/useDebounce";
const app = createApp(App);
app.directive('preventReClick', dir.preventReClick);

使用

xml 复制代码
<Button v-preventReClick type="submit" @click="handleLogin">登录</Button>
相关推荐
用户31673613034212 分钟前
SSE消息推送前后端代码
前端·后端
像我这样帅的人丶你还19 分钟前
JavaScript 迭代器详解
前端·javascript
逍遥归来24 分钟前
《SWIFTER -Swift开发者必备Tips》学习笔记
前端
timi先生24 分钟前
语料库全栈项目部署 (Vue + Java + CQPweb)
java·前端·vue.js
Lazy_zheng25 分钟前
Map / Set / WeakMap / WeakSet,一次给你讲透
前端·javascript·面试
learyuan25 分钟前
Windows原生开发
前端
uzong27 分钟前
ClaudeCode 入门详细教程,手把手带你Vibe Coding
前端·人工智能
英俊潇洒美少年37 分钟前
前端安全 完整精讲
前端·安全
aircrushin38 分钟前
2026我最推荐的前端设计skills
前端
problc40 分钟前
Pretext —— 无 DOM 文本测量与布局引擎
前端·ai