v-debounce

介绍

v-debounce 指令用于为按钮添加防抖功能。它可以有效防止用户快速重复点击按钮导致的性能问题，特别适用于表单提交、数据请求等场景。

使用方法

以下示例展示了输入框和按钮的防抖效果：

点击次数：0

查看代码

<template>
  <div class="container">
    <a-button v-debounce="handleClick" type="primary" shape="round" long size="large">点击按钮</a-button>
    <div class="result">点击次数：{{ clickCount }}</div>
  </div>
</template>

<script setup>
import { vDebounce } from '@cp-vuedir/core'
import { ref } from 'vue'

const clickCount = ref(0)

const handleClick = () => {
  clickCount.value++
}
</script>

<style scoped>
.result {
  margin-top: 8px;
  color: var(--vp-c-text-2);
  font-size: 0.9em;
}
</style>

API

属性名	说明	类型	是否必选	默认值
event	防抖触发的回调函数	Function	✓	-

注意事项

注意

• v-debounce 指令只能用于显式绑定执行函数元素。
• 防抖延迟时间固定为 300ms，不支持自定义。
• 指令可以不传参数直接使用，也可以传入一个回调函数作为参数。