使用vue3全局注册按钮防抖自定义指令

1、不多说，直接上代码

export const directives = (app:any) => {
    app.directive('debounce' , {
        // 自定义指令挂载时的处理逻辑
        // vue3中的生命周期方法，el:当前指令绑定的元素，binding:当前指令对象，binding.value:指令绑定的值
        // 当指令挂载到元素上时触发
        mounted(el:any,binding:any){
            // 判断指令绑定的值是否为函数，如果不是则直接返回
            if(typeof binding.value !== 'function') return
            // 初始化定时器为null
            el.timer = null
            // 定义事件处理函数
            el.handler = function() {
                // 如果定时器存在，则清除定时器
                if(el.timer) {
                    clearTimeout(el.timer)
                }
                // 设置定时器，600毫秒后执行指令绑定的函数
                el.timer = setTimeout(() => {
                    binding.value()
                }, 600)
            }
            // 为元素添加点击事件监听器
            el.addEventListener('click',el.handler)
        },
        // 自定义指令卸载前的处理逻辑
        // 当指令从元素上卸载时触发
        beforeUnmount(el:any,binding:any){
            // 如果定时器存在，则清除定时器
            if(el.timer){
                el.timer = null;
                clearTimeout(el.timer)
            }
            // 移除元素的点击事件监听器
            el.removeEventListener('click',el.handler)
        }
    })
}

2、在main.ts中全局注册

import { directives } from '@/utils/tool'

const app = createApp(App)
directives(app)

3、在项目中直接使用

<template>
    <el-button class="main-button" v-debounce="hanld">查 询</el-button>
</template>

<script lang="ts" setup>
const hanld = () => {
    console.log(123)
}
</script>