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>
相关推荐
三原3 分钟前
实现多选树形组件,我把递归用明白了
前端·数据结构·vue.js
爱上大树的小猪5 分钟前
【前端样式】用 aspect-ratio 实现等比容器:视频封面与图片占位的终极解决方案
前端·css·面试
我血条呢8105 分钟前
一文带你入门 Nuxt 【俺是怎么学习一个框架的be like】
前端
博越5 分钟前
vue实现日历(仿钉钉考勤日历)
前端·javascript
海底火旺5 分钟前
两种思路的碰撞:从超时分层法到高效双指针的蜕变
前端·javascript·算法
s1mpIe6 分钟前
如何实现一个DSL的设计与实现
前端
江城开朗的豌豆8 分钟前
CSS篇:HTML与XHTML:关键区别与实际应用解析
前端·css·面试
一小池勺9 分钟前
基于Next.js 15、Tailwind CSS和Ant Design开发一款低代码表单生成器
前端
huali9 分钟前
unplugin-https-reverse-proxy 2.0 发布:革新移动端调试体验
前端·开源·vite
江城开朗的豌豆11 分钟前
Vue + Node.js 实现埋点功能方案
前端·javascript·架构