feat: 添加长按指令及使用示例，该长按指令支持自定义时长的持续回调 (#620)

src/views/able/directives.vue

@@ -13,6 +13,9 @@ const searchFour = ref("");
 const searchFive = ref("");
 const searchSix = ref("copy");
 const text = ref("可复制的文本");
+const long = ref(false);
+const cbText = ref("");
+const idx = ref(0);
 
 function onInput() {
   message(search.value);
@@ -30,13 +33,30 @@ function onInputFour() {
 function onInputFive({ name, sex }) {
   message(`${name}${sex}${searchFive.value}`);
 }
+
+function onLongpress() {
+  long.value = true;
+}
+function onCustomLongpress() {
+  long.value = true;
+}
+function onCbLongpress() {
+  idx.value += 1;
+  long.value = true;
+  cbText.value = `持续回调${idx.value}次`;
+}
+function onReset() {
+  long.value = false;
+  cbText.value = "";
+  idx.value = 0;
+}
 </script>
 
 <template>
   <el-card shadow="never">
     <template #header>
       <div class="card-header">
-        <span class="font-medium">自定义防抖、截流、文本复制指令</span>
+        <span class="font-medium">自定义防抖、截流、文本复制、长按指令</span>
       </div>
     </template>
     <div class="mb-2">
@@ -113,5 +133,24 @@ function onInputFive({ name, sex }) {
       文本复制指令（自定义触发事件，单击复制）
       <span v-copy:click="text" class="text-sky-500">{{ text }}</span>
     </div>
+
+    <el-divider />
+    <el-space wrap>
+      长按指令
+      <el-button v-longpress="onLongpress">长按（默认500ms）</el-button>
+      <el-button v-longpress:1000="onCustomLongpress">
+        自定义长按时长（1000ms）
+      </el-button>
+      <el-button v-longpress:2000:200="onCbLongpress">
+        2秒后每200ms持续回调
+      </el-button>
+      <el-button @click="onReset"> 重置状态 </el-button>
+      <el-tag :type="long ? 'success' : 'info'" class="ml-2" size="large">
+        {{ long ? "当前为长按状态" : "当前非长按状态" }}
+      </el-tag>
+      <el-tag v-if="cbText" type="danger" class="ml-2" size="large">
+        {{ cbText }}
+      </el-tag>
+    </el-space>
   </el-card>
 </template>