types: 优化自定义指令的类型提示 (#1161)

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<string | Array<string>>) {
     const { value } = binding;
     if (value) {
       !hasAuth(value) && el.parentNode?.removeChild(el);

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<string>) {
     const { value } = binding;
     if (value) {
       el.copyValue = value;

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<Function>) {
     const cb = binding.value;
     if (cb && isFunction(cb)) {
       let timer = null;

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);

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,