debounce

说明

v-debounce -- 防抖指令

推迟调用的执行，若在防抖时间内重复发起调用，则取消前一次调用,并重置防抖时间。

基础语法：v-debounce:事件-时间.修饰符

修饰符

• stop: 阻止点击事件继续冒泡
• prevent: 阻止浏览器的默认行为
• capture: 添加事件侦听器时使用事件捕获模式
• once: 事件只会触发一次
• passive: 告诉浏览器不用去查询，我们没用preventDefault阻止默认行为

简单使用

demo1

<template>
  <demo>
    <input class="demo-input" type="text" v-focus v-debounce:input="input" placeholder="输入内容查看调用次数"/>
    <div class="info">
      <div class="info-item">
        <div class="text">防抖时间</div>
        <div class="tag">300ms</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const input = (e: Event) => {
  demoData.count++
}
</script>

默认事件

默认事件 - click

demo2

<template>
  <demo>
    <button class="demo-button" v-debounce="click">点我+1</button>
    <div class="info">
      <div class="info-item">
        <div class="text">默认防抖时间</div>
        <div class="tag">300ms</div>
      </div>
      <div class="info-item">
        <div class="text">默认绑定事件</div>
        <div class="tag">click</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const click = (e: Event) => {
  demoData.count++
}
</script>

事件绑定

demo3

<template>
  <demo>
    <button class="demo-button" v-debounce:contextmenu.prevent="click">右键点我+1</button>
    <div class="info">
      <div class="info-item">
        <div class="text">默认防抖时间</div>
        <div class="tag">300ms</div>
      </div>
      <div class="info-item">
        <div class="text">绑定事件</div>
        <div class="tag">contextmenu</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const click = (e: Event) => {
  demoData.count++
}
</script>

<style lang="less" scoped></style>

绑定多个事件

demo4

<template>
  <demo>
    <button class="demo-button" v-debounce:click-contextmenu.prevent="click">左键或右键点我+1</button>
    <div class="info">
      <div class="info-item">
        <div class="text">默认防抖时间</div>
        <div class="tag">300ms</div>
      </div>
      <div class="info-item">
        <div class="text">绑定事件</div>
        <div class="tag">click</div>
        <div class="tag">contextmenu</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const click = (e: Event) => {
  demoData.count++
}
</script>

<style lang="less" scoped></style>

设置防抖时间

demo5

<template>
  <demo>
    <input class="demo-input" type="text" v-focus v-debounce:input-1000="input" placeholder="输入内容查看调用次数"/>
    <div class="info">
      <div class="info-item">
        <div class="text">设置防抖时间</div>
        <div class="tag">1000ms</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const input = (e: Event) => {
  demoData.count++
}
</script>