chore: update

pure-admin · Jun 6, 2024 · ca9444d · ca9444d
1 parent 5a0dcbb
commit ca9444d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 16 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -31,11 +31,18 @@
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,
   "i18n-ally.namespace": true,
-  "i18n-ally.enabledParsers": ["yaml", "js"],
+  "i18n-ally.enabledParsers": [
+    "yaml",
+    "js"
+  ],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": ["vue"],
-  "iconify.excludes": ["el"],
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "iconify.excludes": [
+    "el"
+  ],
   "vsmqtt.brokerProfiles": [
     {
       "name": "broker.emqx.io",
@@ -44,6 +51,13 @@
       "clientId": "vsmqtt_client_db34"
     }
   ],
-  "vscodeCustomCodeColor.highlightValue": ["v-auth", "v-optimize", "v-copy", "v-longpress", "v-ripple"],
-  "vscodeCustomCodeColor.highlightValueColor": "#6366f1",
-}
+  "vscodeCustomCodeColor.highlightValue": [
+    "v-loading",
+    "v-auth",
+    "v-copy",
+    "v-longpress",
+    "v-optimize",
+    "v-ripple"
+  ],
+  "vscodeCustomCodeColor.highlightValueColor": "#b392f0",
+}
diff --git a/src/directives/optimize/index.ts b/src/directives/optimize/index.ts
@@ -8,9 +8,22 @@ import {
 import { useEventListener } from "@vueuse/core";
 import type { Directive, DirectiveBinding } from "vue";
 
+export interface OptimizeOptions {
+  /** 事件名 */
+  event: string;
+  /** 事件触发的方法 */
+  fn: (...params: any) => any;
+  /** 是否立即执行 */
+  immediate?: boolean;
+  /** 防抖或节流的延迟时间（防抖默认：`200`毫秒、节流默认：`1000`毫秒） */
+  timeout?: number;
+  /** 传递的参数 */
+  params?: any;
+}
+
 /** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
 export const optimize: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding<OptimizeOptions>) {
     const { value } = binding;
     const optimizeType = binding.arg ?? "debounce";
     const type = ["debounce", "throttle"].find(t => t === optimizeType);

diff --git a/src/directives/ripple/index.ts b/src/directives/ripple/index.ts
@@ -2,8 +2,10 @@ import "./index.scss";
 import { isObject } from "@pureadmin/utils";
 import type { Directive, DirectiveBinding } from "vue";
 
-interface RippleOptions {
+export interface RippleOptions {
+  /** 自定义`ripple`颜色，支持`tailwindcss` */
   class?: string;
+  /** 是否从中心扩散 */
   center?: boolean;
   circle?: boolean;
 }
@@ -220,13 +222,6 @@ function updated(el: HTMLElement, binding: RippleDirectiveBinding) {
   updateRipple(el, binding, wasEnabled);
 }
 
-/**
- * @description 指令 v-ripple
- * @use 用法如下
- * 1. v-ripple 代表启用基本的 ripple 功能
- * 2. v-ripple="{ class: 'text-red' }" 代表自定义 ripple 颜色，支持 tailwindcss，生效样式是 color
- * 3. v-ripple.center 代表从中心扩散
- */
 export const Ripple: Directive = {
   mounted,
   unmounted,

diff --git a/types/directives.d.ts b/types/directives.d.ts
@@ -1,12 +1,25 @@
 import type { Directive } from "vue";
-import type { CopyEl } from "../src/directives/copy/index";
+import type { CopyEl, OptimizeOptions, RippleOptions } from "@/directives";
 
 declare module "vue" {
   export interface ComponentCustomProperties {
+    /** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
     vLoading: Directive<Element, boolean>;
+    /** 按钮权限指令 */
     vAuth: Directive<HTMLElement, string | Array<string>>;
+    /** 文本复制指令（默认双击复制） */
     vCopy: Directive<CopyEl, string>;
+    /** 长按指令 */
     vLongpress: Directive<HTMLElement, Function>;
+    /** 防抖、节流指令 */
+    vOptimize: Directive<HTMLElement, OptimizeOptions>;
+    /**
+     * `v-ripple`指令，用法如下：
+     * 1. `v-ripple`代表启用基本的`ripple`功能
+     * 2. `v-ripple="{ class: 'text-red' }"`代表自定义`ripple`颜色，支持`tailwindcss`，生效样式是`color`
+     * 3. `v-ripple.center`代表从中心扩散
+     */
+    vRipple: Directive<HTMLElement, RippleOptions>;
   }
 }