vue2指令方式防抖功能

基础防抖功能

1. 通过 delay 参数控制防抖时间，默认 2000ms
2. 在防抖期间会禁用按钮，防止重复点击

灵活的参数传递

1. 支持向防抖函数传递参数：args: [arg1, arg2]
2. 可以自定义防抖时间：delay: 2000

智能的开关控制

1. 通过 enable 参数控制防抖功能是否启用
2. 当 enable: false 时，防抖功能会被禁用

依赖监听机制

1. 通过 watch 参数监听数据变化
2. 当监听的数据发生变化时，会重置防抖状态
   例如：watch: selectTreeList 当 selectTreeList 变化时会重置防抖

用户友好的提示

1. 支持自定义重复点击提示信息：tip: ‘请勿重复点击’
2. 提示信息以优雅的弹窗形式展示
3. 提示会在 1 秒后自动消失

完整的生命周期管理

1. bind: 初始化防抖功能
2. update: 处理数据变化和状态更新
3. unbind: 清理定时器和相关属性

优雅的 UI 交互

1. 防抖期间按钮会被禁用
2. 提示信息采用固定定位，居中显示
3. 使用半透明背景，提供良好的视觉体验

安全性和健壮性

1. 对函数参数进行类型检查
2. 提供警告信息
3. 完善的资源清理机制

/*** 增强版防抖指令* 功能：支持参数传递、开关控制、依赖监听、重复点击提示* 使用方式:* 1. 基本用法: v-debounce="{fn: handleClick, delay: 2000}"* 2. 带参数: v-debounce="{fn: handleClick, delay: 2000, args: [arg1, arg2]}"* 3. 控制开关: v-debounce="{fn: handleClick, delay: 2000, enable: true}"* 4. 监听变化: v-debounce="{fn: handleClick, delay: 2000, watch: selectTreeList}"* 5. 提示信息: v-debounce="{fn: handleClick, delay: 2000, tip: '请勿重复点击'}"*/
export default {bind(el, binding) {if (typeof binding.value.fn !== 'function') {console.warn('v-debounce指令需要传入一个函数');return;}const delay = binding.value.delay || 2000;const enable = binding.value.enable !== false;const tip = binding.value.tip || '请勿重复点击';let timer = null;let isDisabled = false;// 挂载重置方法到元素实例el._debounceReset = () => {isDisabled = false;el.disabled = false;if (timer) {clearTimeout(timer);timer = null;}};// 初始化监听值if (binding.value.watch) {el._lastWatchValue = JSON.stringify(binding.value.watch);}const executeFn = () => {binding.value.fn(...(binding.value.args || []));};el.addEventListener('click', () => {if (!enable) return;if (isDisabled) {console.log('isDisabled', isDisabled);console.log('显示提示信息');// 显示提示信息const tipEl = document.createElement('div');tipEl.style.cssText = `position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.7);color: white;padding: 10px 20px;border-radius: 4px;z-index: 9999;`;tipEl.textContent = tip;document.body.appendChild(tipEl);// 1秒后移除提示setTimeout(() => {document.body.removeChild(tipEl);}, 1000);return;}isDisabled = true;el.disabled = true;executeFn();timer = setTimeout(el._debounceReset, delay);});},update(el, binding) {// 检查watch值变化if (binding.value.watch) {const currentValue = JSON.stringify(binding.value.watch);if (el._lastWatchValue !== currentValue) {el._lastWatchValue = currentValue;el._debounceReset();}}// 处理enable状态变化if (binding.value.enable === false && el.disabled) {el._debounceReset();}},unbind(el) {clearTimeout(el._debounceTimer);delete el._debounceReset;delete el._lastWatchValue;},
};

用法

 <el-button:disabled="disabledLogCollect":loading="!isCollect"v-permission="'vd.sr.logCollect.UserLogCollection'"type="primary":data-warden-title="userLogs.UserlogsCollect":element-loading-text="$t('loading')"v-debounce="{fn: Submit,delay: 3000,enable: true,watch: selectTreeList,tip: $t('debounceTip'),}">