vue3 compositionApi如何实现click事件节流？

Question

<MButton @click="output">button</MButton>
...
<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch, computed } from 'vue'

export default defineComponent({
  name: 'MButton',
  emits: {
    click: null
  },
  setup(props, { attrs, emit }) {

    const throttle = (fn: string, delay: number = 500) => {
      let timer: number = null
      return (...args: []) => {
        if (!timer) {
          emit(fn, args)
          timer = window.setTimeout(() => {
            timer = null
          }, delay)
        }
      }
    }

    function handleClick() {
      // emit('click')
      throttle('click', 500)
    }

    return {
      handleClick,
    }
  },
})
</script>

像这样写似乎无法触发

Answer 1

@click 这个绑定的应该是你throttle处理后的函数。用法和vue2一样的，你写法中的误区是每次执行都调用了throttle。

Answer 2

vueuse这个库有相关实现