vue 写一个通用的防抖添加指令

通过扩展Vue.prototype来实现，在全局范围内给所有点击事件添加防抖。具体步骤如下：

1. 在入口文件（例如main.js）中导入lodash库的debounce方法：

import { debounce } from 'lodash';

1. 在入口文件中将debounce方法添加到Vue的原型中：

Vue.prototype.$debounce = debounce;

1. 创建一个全局指令来处理所有点击事件，并在其中应用防抖逻辑。可以在入口文件中或者单独的文件中注册全局指令。示例代码如下：

import Vue from 'vue';

Vue.directive('debounce-click', {
  bind(el, binding) {
    const { value, arg } = binding;
    const callback = typeof value === 'function' ? value : value.handler;
    const delay = arg ? parseInt(arg) : 300;

    const debouncedCallback = Vue.prototype.$debounce(callback, delay);

    el.addEventListener('click', debouncedCallback);
  },
  unbind(el, binding) {
    const { value } = binding;
    const callback = typeof value === 'function' ? value : value.handler;

    el.removeEventListener('click', callback);
  },
});

在上述代码中，我们创建了一个名为debounce-click的全局指令。在bind阶段，我们获取传递给指令的回调函数、延迟时间并应用防抖逻辑。在unbind阶段，我们移除事件监听器。

1. 在项目中使用全局指令，给所有点击事件添加防抖逻辑：

<template>
  <div>
    <button v-debounce-click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Click event debounce');
    },
  },
};
</script>

在上面的示例中，我们使用全局指令v-debounce-click来添加防抖逻辑。handleClick方法将在点击事件发生时进行防抖处理。

通过以上步骤，我们就成功地给项目的所有点击事件添加了防抖功能。