From 064f5d28d06c7dff6dc678e4cf6b17c3f618b5b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Wed, 20 Nov 2024 17:08:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20guests.vue?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=AF=B9=20FormKitNode=20=E7=9A=84?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=EF=BC=8C=E8=B0=83=E6=95=B4=20v-auto-animate?=
 =?UTF-8?q?=20=E6=8C=81=E7=BB=AD=E6=97=B6=E9=97=B4=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E7=A7=BB=E9=99=A4=E6=8C=89=E9=92=AE=E7=9A=84=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tutorial-form/guests.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/tutorial-form/guests.vue b/src/tutorial-form/guests.vue
index 370a457..0ee6116 100644
--- a/src/tutorial-form/guests.vue
+++ b/src/tutorial-form/guests.vue
@@ -1,9 +1,21 @@
 <script setup lang="ts">
+import { FormKitNode } from '@formkit/core';
 import { FormKitMessages } from '@formkit/vue'
+import { onMounted, ref } from 'vue';
+
+const listRef = ref<{ node: FormKitNode }>()
+onMounted(() => {
+  const listNode = listRef.value?.node
+  console.debug(`listNode :>> `, listNode);
+  setTimeout(() => {
+    listNode;
+  }, 1000);
+})
 </script>
 
 <template>
   <FormKit
+    ref="listRef"
     type="list"
     name="guests"
     label="客人列表"
@@ -14,7 +26,7 @@ import { FormKitMessages } from '@formkit/vue'
   >
     <div
       class="attributes-group"
-      v-auto-animate
+      v-auto-animate="{ duration: 500 }"
     >
       <FormKitMessages />
       <FormKit
@@ -41,7 +53,7 @@ import { FormKitMessages } from '@formkit/vue'
           <button
             type="button"
             class="border border-blue-600 text-blue-600 p-3"
-            @click="() => node.input(value?.filter((_, i) => i !== index))"
+            @click="() => node.remove(node.children[index])"
           >
             - 移除
           </button>