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

1. 先创建一个debounce.ts

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间隔时间
                }
            })
        }
    }
}

在全局注册指令

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

使用

<Button v-preventReClick type="submit" @click="handleLogin">登录</Button>