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

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>