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>
相关推荐
Mintopia11 分钟前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia13 分钟前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso13 分钟前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
少年阿闯~~20 分钟前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher22 分钟前
CSS 继承 (Inheritance)
前端·css
祈祷苍天赐我java之术30 分钟前
Vue 整体框架全面解析
前端·javascript·vue.js
洛小豆1 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
世间小小鱼1 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws
华仔啊1 小时前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript
BeefyBytes2 小时前
动态组件库建设
前端