mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +08:00 
			
		
		
		
	feat: 添加防抖和节流指令并规范自定义指令用法错误时的提示
				
					
				
			This commit is contained in:
		
							parent
							
								
									c06ce94746
								
							
						
					
					
						commit
						d850496601
					
				@ -7,7 +7,9 @@ export const auth: Directive = {
 | 
			
		||||
    if (value) {
 | 
			
		||||
      !hasAuth(value) && el.parentNode?.removeChild(el);
 | 
			
		||||
    } else {
 | 
			
		||||
      throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
 | 
			
		||||
      throw new Error(
 | 
			
		||||
        "[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
 | 
			
		||||
      );
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -1 +1,2 @@
 | 
			
		||||
export * from "./auth";
 | 
			
		||||
export * from "./optimize";
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										55
									
								
								src/directives/optimize/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										55
									
								
								src/directives/optimize/index.ts
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,55 @@
 | 
			
		||||
import {
 | 
			
		||||
  isFunction,
 | 
			
		||||
  isObject,
 | 
			
		||||
  isArray,
 | 
			
		||||
  debounce,
 | 
			
		||||
  throttle
 | 
			
		||||
} from "@pureadmin/utils";
 | 
			
		||||
import { useEventListener } from "@vueuse/core";
 | 
			
		||||
import { Directive, type DirectiveBinding } from "vue";
 | 
			
		||||
 | 
			
		||||
/** 防抖(v-optimize或v-optimize:debounce)、节流(v-optimize:throttle)指令 */
 | 
			
		||||
export const optimize: Directive = {
 | 
			
		||||
  mounted(el: HTMLElement, binding: DirectiveBinding) {
 | 
			
		||||
    const { value } = binding;
 | 
			
		||||
    const optimizeType = binding.arg ?? "debounce";
 | 
			
		||||
    const type = ["debounce", "throttle"].find(t => t === optimizeType);
 | 
			
		||||
    if (type) {
 | 
			
		||||
      if (value && value.event && isFunction(value.fn)) {
 | 
			
		||||
        let params = value?.params;
 | 
			
		||||
        if (params) {
 | 
			
		||||
          if (isArray(params) || isObject(params)) {
 | 
			
		||||
            params = isObject(params) ? Array.of(params) : params;
 | 
			
		||||
          } else {
 | 
			
		||||
            throw new Error(
 | 
			
		||||
              "[Directive: optimize]: `params` must be an array or object"
 | 
			
		||||
            );
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
        // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
 | 
			
		||||
        useEventListener(
 | 
			
		||||
          el,
 | 
			
		||||
          value.event,
 | 
			
		||||
          type === "debounce"
 | 
			
		||||
            ? debounce(
 | 
			
		||||
                params ? () => value.fn(...params) : value.fn,
 | 
			
		||||
                value?.timeout ?? 200,
 | 
			
		||||
                value?.immediate ?? false
 | 
			
		||||
              )
 | 
			
		||||
            : throttle(
 | 
			
		||||
                params ? () => value.fn(...params) : value.fn,
 | 
			
		||||
                value?.timeout ?? 200
 | 
			
		||||
              )
 | 
			
		||||
        );
 | 
			
		||||
      } else {
 | 
			
		||||
        throw new Error(
 | 
			
		||||
          "[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
 | 
			
		||||
        );
 | 
			
		||||
      }
 | 
			
		||||
    } else {
 | 
			
		||||
      throw new Error(
 | 
			
		||||
        "[Directive: optimize]: only `debounce` and `throttle` are supported"
 | 
			
		||||
      );
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user