自定义指令： 防抖

多次点击按钮、输入框中输入文字搜索，会多次调用后端接口，防止多次触发。默认延时为 200ms

基础用法

在需要的 dom 上，使用 v-debounce 自定义指令，需要指定触发的 click 事件

<template>
  <Button v-debounce:click="search">搜索</Button>
</template>

<script setup>
  import { getCurrentInstance } from 'vue';

  const { proxy } = getCurrentInstance();

  const search = () => {
    proxy.$Message.info('搜索');
  };
</script>

隐藏源代码

输入框使用

在需要的 dom 上，使用 v-debounce 自定义指令，需要指定触发的 input 事件

<template>
  <Input v-debounce:input="search">搜索</Input>
</template>

<script setup>
  import { getCurrentInstance } from 'vue';

  const { proxy } = getCurrentInstance();

  const search = () => {
    proxy.$Message.info('搜索');
  };
</script>

隐藏源代码

自定义延迟时间

在需要的 dom 上，使用 v-debounce 自定义指令，需要指定触发的事件，传入回调的 fun 和 延迟时间 delay 毫秒

<template>
  <Button v-debounce:click="{ fun: search, delay: 1000 }">搜索</Button>
</template>

<script setup>
  import { getCurrentInstance } from 'vue';

  const { proxy } = getCurrentInstance();

  const search = () => {
    proxy.$Message.info('搜索');
  };
</script>

隐藏源代码