feat: 添加防抖指令和任务管理功能
feat(anchor): 新增主播管理模块 feat(account): 完善客服账号管理功能 feat(knowledge): 添加任务列表查看和重新执行功能 feat(router): 增强路由组件动态导入逻辑 refactor: 优化多个视图的按钮防抖处理 style: 统一代码格式和样式 fix: 修复客服账号状态切换逻辑
This commit is contained in:
53
src/utils/debounce.ts
Normal file
53
src/utils/debounce.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { onUnmounted } from 'vue';
|
||||
|
||||
interface DebounceOptions {
|
||||
delay?: number;
|
||||
immediate?: boolean;
|
||||
}
|
||||
|
||||
export function useDebounce() {
|
||||
const timers = new Map<string, number>();
|
||||
|
||||
const debounce = (key: string, fn: () => void, options: DebounceOptions = {}) => {
|
||||
const { delay = 300 } = options;
|
||||
|
||||
if (timers.has(key)) {
|
||||
clearTimeout(timers.get(key) as number);
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
fn();
|
||||
timers.delete(key);
|
||||
}, delay) as unknown as number;
|
||||
|
||||
timers.set(key, timer);
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
timers.forEach((timer) => clearTimeout(timer));
|
||||
timers.clear();
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
clear();
|
||||
});
|
||||
|
||||
return { debounce, clear };
|
||||
}
|
||||
|
||||
export function createDebouncedFn(key: string, fn: () => void, delay = 300) {
|
||||
const timers = new Map<string, number>();
|
||||
|
||||
return () => {
|
||||
if (timers.has(key)) {
|
||||
clearTimeout(timers.get(key) as number);
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
fn();
|
||||
timers.delete(key);
|
||||
}, delay) as unknown as number;
|
||||
|
||||
timers.set(key, timer);
|
||||
};
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import type { App } from 'vue';
|
||||
import { authDirective } from '/@/utils/authDirective';
|
||||
import { wavesDirective, dragDirective } from '/@/utils/customDirective';
|
||||
import { debounceDirective } from '/@/directives/debounce';
|
||||
|
||||
/**
|
||||
* 导出指令方法:v-xxx
|
||||
* @methods authDirective 用户权限指令,用法:v-auth
|
||||
* @methods wavesDirective 按钮波浪指令,用法:v-waves
|
||||
* @methods dragDirective 自定义拖动指令,用法:v-drag
|
||||
* @methods debounceDirective 防抖指令,用法:v-debounce
|
||||
*/
|
||||
export function directive(app: App) {
|
||||
// 用户权限指令
|
||||
@@ -15,4 +17,6 @@ export function directive(app: App) {
|
||||
wavesDirective(app);
|
||||
// 自定义拖动指令
|
||||
dragDirective(app);
|
||||
// 防抖指令
|
||||
app.directive('debounce', debounceDirective);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user