整理

src/App.vue

@@ -15,15 +15,15 @@ const castNumber = (node: FormKitNode) => {
 
 onMounted(() => {
   console.group('onMounted')
-  const nameNode = getNode('nameNodeId')
+  const nameNode = getNode('nameNodeId') // 用 id 获取节点
   Object.assign(window, { nameNode })
   console.debug(`nameNode :>> `, nameNode);
 
-  const schemaGroupInput = nameNode!.root.at('schemaGroup.input')
+  const schemaGroupInput = nameNode?.root.at('schemaGroup.input') // 用路径获取节点
   console.debug(`schemaGroupInput :>> `, schemaGroupInput);
-  nameNode!.on('commit', ({ payload }) => {
+  nameNode?.on('commit', ({ payload }) => {
     console.debug('[nameNode] [on commit]', `payload :>> `, payload);
-    schemaGroupInput!.input(`姓名：${payload}`)
+    schemaGroupInput?.input(`姓名：${payload}`)
   })
   console.groupEnd()
 })
@@ -58,6 +58,18 @@ const SCHEMA: FormKitSchemaDefinition = [
   }
 ];
 
+function onChangeName() {
+  const nameNode = getNode('nameNodeId')
+  nameNode?.input('测试')
+}
+
+import autoAnimate from "@formkit/auto-animate"
+onMounted(() => {
+  // setTimeout(() => {
+  autoAnimate(document.getElementById('attributes-group-wrapper')!);
+  // });
+})
+
 </script>
 
 <template>
@@ -70,7 +82,10 @@ const SCHEMA: FormKitSchemaDefinition = [
       submit-label="提交 ✨"
     >
       <!-- v-auto-animate -->
-      <div class="character-attributes">
+      <div
+        class="character-attributes"
+        id="attributes-group-wrapper"
+      >
         <FormKit
           type="group"
           name="attributes"
@@ -80,7 +95,7 @@ const SCHEMA: FormKitSchemaDefinition = [
               return name?.includes('测试') ? true : false
             }
           }"
-          validation-visibility="live"
+          validation-visibility="dirty"
           validation="validateGroup"
           :validation-messages="{
             validateGroup: ({ name/* , args */ }) => {
@@ -97,7 +112,22 @@ const SCHEMA: FormKitSchemaDefinition = [
             label="姓名"
             :help="`现在 confirmName 的值是：${attributes?.confirmName}`"
             some-attr="some-attr-value"
-          />
+          >
+            <template #label="{ classes, attrs, label }">
+              <!-- <pre
+                class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ JSON.stringify({ classes, attrs, label }, null, 2) }}</pre> -->
+              <label
+                for="nameNodeId"
+                v-bind="attrs"
+                :class="classes.label"
+              >{{ label }}<button
+                  class="ml-2 px-2 py-1 bg-blue-500 text-white rounded"
+                  type="button"
+                  @click="onChangeName"
+                >点击赋值</button>
+              </label>
+            </template>
+          </FormKit>
 
           <FormKit
             v-if="attributes?.name"