vue3 自定义防抖指令

下载 yarn add loadsh

//新建 debounceDirective.js

//debounceDirective.js

import {debounce }from 'lodash'
export default { 
    beforeMount(el, binding) {
    const handler = binding.value;
    const delay = binding.arg || 500; // 默认延迟500毫秒

    const debouncedHandler = debounce(handler, delay);

    el.addEventListener('click', debouncedHandler);

    // 组件销毁时移除事件监听器
    el._debounceHandler = debouncedHandler;
  },
  updated(el, binding) {
    // 如果指令的值发生变化，重新创建防抖函数
    if (el._debounceHandler) {
      el.removeEventListener('click', el._debounceHandler);
    }
    const handler = binding.value;
    const delay = binding.arg || 500;
    const debouncedHandler = debounce(handler, delay);
    el.addEventListener('click', debouncedHandler);
    el._debounceHandler = debouncedHandler;
  },
  unmounted(el) {
    // 移除事件监听器
    if (el._debounceHandler) {
      el.removeEventListener('click', el._debounceHandler);
    }
  }
}

//引入main.js
//main.js
import debounceDirective from './debounceDirective.js

app.directive('debounce',debounceDirective)


//组件中直接使用
//App.js

<el-button v-debounce:500="handUploading"> 防抖 </el-button>

const handUploading=()=>{console.log('防抖触发了')}