vue3 onConfirmClick使用函数防抖

在Vue 3中使用函数防抖可以通过自定义指令或者在方法中手动调用防抖函数来实现。下面是两种方法的示例：

1. 使用自定义指令：

// 在main.js中注册全局指令
app.directive('debounce', {
  mounted(el, binding) {
    const { value, arg = 1000 } = binding
    let timer = null
    el.addEventListener('click', () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        value && value()
      }, arg)
    })
  }
})

// 在组件中使用指令
<template>
  <button v-debounce:click="onConfirmClick">确认</button>
</template>

<script>
export default {
  methods: {
    onConfirmClick() {
      // 处理点击事件
    }
  }
}
</script>

2. 在方法中手动调用防抖函数：

<template>
  <button @click="debouncedConfirmClick">确认</button>
</template>

<script>
import useDebounce from './useDebounce'

export default {
  methods: {
    debouncedConfirmClick() {
      useDebounce(this.onConfirmClick)
    },
    onConfirmClick() {
      // 处理点击事件
    }
  }
}
</script>