feat: 添加防抖指令和任务管理功能
feat(anchor): 新增主播管理模块 feat(account): 完善客服账号管理功能 feat(knowledge): 添加任务列表查看和重新执行功能 feat(router): 增强路由组件动态导入逻辑 refactor: 优化多个视图的按钮防抖处理 style: 统一代码格式和样式 fix: 修复客服账号状态切换逻辑
This commit is contained in:
49
src/directives/debounce.ts
Normal file
49
src/directives/debounce.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { Directive, DirectiveBinding } from 'vue';
|
||||
|
||||
interface DebounceBinding extends DirectiveBinding {
|
||||
value: () => void;
|
||||
arg?: string;
|
||||
modifiers?: {
|
||||
[key: string]: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
const debounceTimers = new Map<string, number>();
|
||||
|
||||
const debounce = (fn: () => void, key: string, delay = 300) => {
|
||||
if (debounceTimers.has(key)) {
|
||||
clearTimeout(debounceTimers.get(key) as number);
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
fn();
|
||||
debounceTimers.delete(key);
|
||||
}, delay) as unknown as number;
|
||||
|
||||
debounceTimers.set(key, timer);
|
||||
};
|
||||
|
||||
export const debounceDirective: Directive = {
|
||||
mounted(el: HTMLElement, binding: DebounceBinding) {
|
||||
const fn = binding.value;
|
||||
const key = binding.arg || `debounce_${Date.now()}_${Math.random()}`;
|
||||
const delay = binding.modifiers?.fast ? 200 : binding.modifiers?.slow ? 500 : 300;
|
||||
|
||||
el.addEventListener('click', (event: Event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
debounce(fn, key, delay);
|
||||
});
|
||||
|
||||
el.dataset.debounceKey = key;
|
||||
},
|
||||
unmounted(el: HTMLElement) {
|
||||
const key = el.dataset.debounceKey;
|
||||
if (key && debounceTimers.has(key)) {
|
||||
clearTimeout(debounceTimers.get(key) as number);
|
||||
debounceTimers.delete(key);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default debounceDirective;
|
||||
Reference in New Issue
Block a user