feat: 添加防抖、截流、复制自定义指令使用示例

locales/en.yaml

@@ -68,6 +68,7 @@ menus:
   hsguide: Guide
   hsAble: Able
   hsMenuTree: Menu Tree
+  hsOptimize: Debounce、Throttle、Copy Directives
   hsWatermark: Water Mark
   hsPrint: Print
   hsDownload: Download

locales/zh-CN.yaml

@@ -68,6 +68,7 @@ menus:
   hsguide: 引导页
   hsAble: 功能
   hsMenuTree: 菜单树结构
+  hsOptimize: 防抖、截流、复制指令
   hsWatermark: 水印
   hsPrint: 打印
   hsDownload: 下载

src/directives/optimize/index.ts

@@ -38,7 +38,7 @@ export const optimize: Directive = {
               )
             : throttle(
                 params ? () => value.fn(...params) : value.fn,
-                value?.timeout ?? 200
+                value?.timeout ?? 1000
               )
         );
       } else {

src/router/modules/able.ts

@@ -10,6 +10,15 @@ export default {
     rank: able
   },
   children: [
+    {
+      path: "/able/directives",
+      name: "Directives",
+      component: () => import("@/views/able/directives.vue"),
+      meta: {
+        title: $t("menus.hsOptimize"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/able/watermark",
       name: "WaterMark",

src/views/able/directives.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+
+defineOptions({
+  name: "Directives"
+});
+
+const search = ref("");
+const searchTwo = ref("");
+const searchThree = ref("");
+const searchFour = ref("");
+const searchFive = ref("");
+const searchSix = ref("copy");
+const text = ref("可复制的文本");
+
+function onInput() {
+  message(search.value);
+}
+function onInputTwo() {
+  message(searchTwo.value);
+}
+function onInputThree({ name, sex }) {
+  message(`${name}${sex}${searchThree.value}`);
+}
+
+function onInputFour() {
+  message(searchFour.value);
+}
+function onInputFive({ name, sex }) {
+  message(`${name}${sex}${searchFive.value}`);
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">自定义防抖、截流、文本复制指令</span>
+      </div>
+    </template>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行第一次点击事件，立即执行）
+      <el-input
+        v-optimize="{
+          event: 'input',
+          fn: onInput,
+          immediate: true,
+          timeout: 1000
+        }"
+        v-model="search"
+        class="!w-[200px]"
+        clearable
+        @clear="onInput"
+      />
+    </div>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行最后一次事件，延后执行）
+      <el-input
+        v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
+        v-model="searchTwo"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      防抖指令（连续输入，只会执行最后一次事件，延后执行，传参用法）
+      <el-input
+        v-optimize="{
+          event: 'input',
+          fn: onInputThree,
+          timeout: 400,
+          params: { name: '小明', sex: '男' }
+        }"
+        v-model="searchThree"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      节流指令（连续输入，每一秒只会执行一次事件）
+      <el-input
+        v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
+        v-model="searchFour"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      节流指令（连续输入，每一秒只会执行一次事件，传参用法）
+      <el-input
+        v-optimize:throttle="{
+          event: 'input',
+          fn: onInputFive,
+          params: { name: '小明', sex: '男' }
+        }"
+        v-model="searchFive"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      文本复制指令（双击输入框内容即可复制）
+      <el-input v-copy="searchSix" v-model="searchSix" class="!w-[200px]" />
+    </div>
+    <div>
+      文本复制指令（自定义触发事件，单击复制）
+      <span v-copy:click="text" class="text-sky-500">{{ text }}</span>
+    </div>
+  </el-card>
+</template>