// 注册一个全局自定义指令 `v-debounce`
Vue.directive('debounce', {
  // 当被绑定的元素插入到 DOM 中时...
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value(); // 调用传给指令的方法
      }, 500);
    });
  },
  // 当绑定元素的父组件更新时...
  update: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value(); // 调用传给指令的方法
      }, 500);
    });
  }
});

// 使用指令
// 在组件中
<template>
  <button v-debounce="myClickHandler">Click me</button>
</template>

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