防抖自定义指令(防止重复点击重复调接口)

main.js

// 防止重复点击生成重复数据
const throttle = {
    bind: (el, binding) => {
        let throttleTime = binding.value // 防抖时间
        if (!throttleTime) {
            throttleTime = 1000 // 不设置防抖时间，则默认1s
        }
        let timer
        let disable = false
        el.addEventListener(
            "click",
            (event) => {
                if (timer) {
                    clearTimeout(timer)
                }
                if (!disable) {
                    // 第一次执行(一点击触发当前事件)
                    disable = true
                } else {
                    event && event.stopImmediatePropagation()
                }
                timer = setTimeout(() => {
                    timer = null
                    disable = false
                }, throttleTime)
            },
            true
        )
    },
}
Vue.directive("throttle", throttle)

使用

 <el-button v-throttle="5000" @click="handleSubmit()">提交</el-button>