docs: 更新文档

FightingDesign · Mar 1, 2024 · b669e3b · b669e3b
1 parent 4bfae8d
commit b669e3b
Show file tree

Hide file tree

Showing 2 changed files with 400 additions and 204 deletions.
diff --git a/docs/components/form.md b/docs/components/form.md
@@ -149,6 +149,89 @@
 
 :::
 
+## 深度校验
+
+表单对象有深层嵌套的情况下，可以指定 `f-form-item` 层级关系的 `name` 配置项，以 `.` 为分隔符
+
+::: demo
+
+<template #source>
+{{ ruleForm3 }}
+<f-form :model="ruleForm3" label-width="60px" :on-submit="handelSubmit3">
+<f-form-item label="账号" name="admin.info.username" :rules="[{ required: true, message: '请输入用户名' }, { min: 4, max: 12, message: '请输入 4~12 用户名' }, { regExp: /123456/, message: '必须包含 123456' }]">
+<f-input v-model="ruleForm3.admin.info.username" type="text" placeholder="请输入账号" />
+</f-form-item>
+
+<f-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '至少输入六位数密码' }]">
+<f-input v-model="ruleForm3.password" type="password" placeholder="请输入密码" />
+</f-form-item>
+
+<f-form-item>
+<f-button type="primary" native-type="submit" block>提交表单</f-button>
+</f-form-item>
+</f-form>
+</template>
+
+```vue
+<script lang="ts" setup>
+  import { reactive } from 'vue'
+  import { FMessage } from 'fighting-design'
+  import type { FormSubmit } from 'fighting-design'
+
+  const ruleForm3 = reactive({
+    admin: {
+      info: {
+        username: ''
+      }
+    },
+    password: ''
+  })
+
+  const handelSubmit3: FormSubmit = (ok, model, res, evt): void => {
+    if (!ok) return
+    FMessage.primary(`ok: ${ok} model:${model} res: ${res} evt: ${evt} 开始提交表单`)
+  }
+</script>
+
+<template>
+  {{ ruleForm3 }}
+  <f-form :model="ruleForm3" label-width="60px" :on-submit="handelSubmit3">
+    <f-form-item
+      label="账号"
+      name="admin.info.username"
+      :rules="[
+        { required: true, message: '请输入用户名' },
+        { min: 4, max: 12, message: '请输入 4~12 用户名' },
+        { regExp: /123456/, message: '必须包含 123456' }
+      ]"
+    >
+      <f-input
+        v-model="ruleForm3.admin.info.username"
+        type="text"
+        placeholder="请输入账号"
+      />
+    </f-form-item>
+
+    <f-form-item
+      label="密码"
+      name="password"
+      :rules="[
+        { required: true, message: '请输入密码' },
+        { min: 6, message: '至少输入六位数密码' }
+      ]"
+    >
+      <f-input v-model="ruleForm3.password" type="password" placeholder="请输入密码" />
+    </f-form-item>
+
+    <f-form-item>
+      <f-button type="primary" native-type="submit" block>提交表单</f-button>
+    </f-form-item>
+  </f-form>
+</template>
+```
+
+:::
+
 ## Form Attributes
 
 | 参数             | 说明                     | 类型                                       | 可选值       | 默认值 |
@@ -266,4 +349,18 @@ type LabelPosition = 'left' | 'top'
     if (!ok) return
     FMessage.primary(`ok: ${ok} model:${model} res: ${res} evt: ${evt} 开始提交表单`)
   }
+
+  const ruleForm3 = reactive({
+    admin: {
+      info: {
+        username: ''
+      }
+    },
+    password: ''
+  })
+
+  const handelSubmit3: FormSubmit = (ok, model, res, evt): void => {
+    if (!ok) return
+    FMessage.primary(`ok: ${ok} model:${model} res: ${res} evt: ${evt} 开始提交表单`)
+  }
 </script>