From a75cf8394eb2820fa4433f021d12a0e61e43aec8 Mon Sep 17 00:00:00 2001 From: sea <45450994+warmthsea@users.noreply.github.com> Date: Thu, 6 Jun 2024 16:26:32 +0800 Subject: [PATCH] =?UTF-8?q?types:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=8C=87=E4=BB=A4=E7=9A=84=E7=B1=BB=E5=9E=8B=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=20(#1161)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/extensions.json | 1 + .vscode/settings.json | 26 +++++++++++++++++++++----- src/directives/auth/index.ts | 2 +- src/directives/copy/index.ts | 4 ++-- src/directives/longpress/index.ts | 2 +- src/directives/optimize/index.ts | 15 ++++++++++++++- src/directives/ripple/index.ts | 11 +++-------- types/directives.d.ts | 26 ++++++++++++++++++++++++++ 8 files changed, 69 insertions(+), 18 deletions(-) create mode 100644 types/directives.d.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 99f21c9ab6..a793646e69 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,6 +1,7 @@ { "recommendations": [ "christian-kohler.path-intellisense", + "warmthsea.vscode-custom-code-color", "vscode-icons-team.vscode-icons", "davidanson.vscode-markdownlint", "ms-azuretools.vscode-docker", diff --git a/.vscode/settings.json b/.vscode/settings.json index 9752f89856..b5aefceb49 100644 --- 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", @@ -43,5 +50,14 @@ "port": 1883, "clientId": "vsmqtt_client_db34" } - ] -} + ], + "vscodeCustomCodeColor.highlightValue": [ + "v-loading", + "v-auth", + "v-copy", + "v-longpress", + "v-optimize", + "v-ripple" + ], + "vscodeCustomCodeColor.highlightValueColor": "#b392f0", +} \ No newline at end of file diff --git a/src/directives/auth/index.ts b/src/directives/auth/index.ts index a7a4f22160..2fc6490476 100644 --- a/src/directives/auth/index.ts +++ b/src/directives/auth/index.ts @@ -2,7 +2,7 @@ import { hasAuth } from "@/router/utils"; import type { Directive, DirectiveBinding } from "vue"; export const auth: Directive = { - mounted(el: HTMLElement, binding: DirectiveBinding) { + mounted(el: HTMLElement, binding: DirectiveBinding>) { const { value } = binding; if (value) { !hasAuth(value) && el.parentNode?.removeChild(el); diff --git a/src/directives/copy/index.ts b/src/directives/copy/index.ts index 8e97833819..b71fa1901f 100644 --- a/src/directives/copy/index.ts +++ b/src/directives/copy/index.ts @@ -3,13 +3,13 @@ import { useEventListener } from "@vueuse/core"; import { copyTextToClipboard } from "@pureadmin/utils"; import type { Directive, DirectiveBinding } from "vue"; -interface CopyEl extends HTMLElement { +export interface CopyEl extends HTMLElement { copyValue: string; } /** 文本复制指令（默认双击复制） */ export const copy: Directive = { - mounted(el: CopyEl, binding: DirectiveBinding) { + mounted(el: CopyEl, binding: DirectiveBinding) { const { value } = binding; if (value) { el.copyValue = value; diff --git a/src/directives/longpress/index.ts b/src/directives/longpress/index.ts index 5442784486..4eec6a22be 100644 --- a/src/directives/longpress/index.ts +++ b/src/directives/longpress/index.ts @@ -3,7 +3,7 @@ import type { Directive, DirectiveBinding } from "vue"; import { subBefore, subAfter, isFunction } from "@pureadmin/utils"; export const longpress: Directive = { - mounted(el: HTMLElement, binding: DirectiveBinding) { + mounted(el: HTMLElement, binding: DirectiveBinding) { const cb = binding.value; if (cb && isFunction(cb)) { let timer = null; diff --git a/src/directives/optimize/index.ts b/src/directives/optimize/index.ts index 395eb456c3..7b92538d1f 100644 --- 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) { 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 index 06ff25f267..3fd94d9cf1 100644 --- 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 new file mode 100644 index 0000000000..87256982f1 --- /dev/null +++ b/types/directives.d.ts @@ -0,0 +1,26 @@ +import type { Directive } from "vue"; +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; + /** 按钮权限指令 */ + vAuth: Directive>; + /** 文本复制指令（默认双击复制） */ + vCopy: Directive; + /** 长按指令 */ + vLongpress: Directive; + /** 防抖、节流指令 */ + vOptimize: Directive; + /** + * `v-ripple`指令，用法如下： + * 1. `v-ripple`代表启用基本的`ripple`功能 + * 2. `v-ripple="{ class: 'text-red' }"`代表自定义`ripple`颜色，支持`tailwindcss`，生效样式是`color` + * 3. `v-ripple.center`代表从中心扩散 + */ + vRipple: Directive; + } +} + +export {};