docs: 更新文档

FightingDesign · May 10, 2023 · 4401f33 · 4401f33
1 parent 0540d7b
commit 4401f33
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 37 deletions.
diff --git a/docs/components/form.md b/docs/components/form.md
@@ -101,16 +101,16 @@
 <script lang="ts" setup>
   import { reactive } from 'vue'
   import { FMessage } from 'fighting-design'
-  import type { FormParam } from 'fighting-design'
+  import type { FormSubmit } from 'fighting-design'
 
   const ruleForm2 = reactive({
     account: '',
     password: ''
   })
 
-  const handelSubmit2 = ({ ok, res, evt }: FormParam): void => {
+  const handelSubmit2: FormSubmit = (ok, model, res, evt): void => {
     if (!ok) return
-    FMessage.primary(`ok: ${ok} res: ${res} evt: ${evt} 开始提交表单`)
+    FMessage.primary(`ok: ${ok} model:${model} res: ${res} evt: ${evt} 开始提交表单`)
   }
 </script>
 
@@ -151,12 +151,12 @@
 
 ## Form Attributes
 
-| 参数             | 说明                     | 类型                                       | 可选值        | 默认值 |
-| ---------------- | ------------------------ | ------------------------------------------ | ------------- | ------ |
-| `label-width`    | label 的宽度             | string / number                            | ——            | ——     |
-| `label-position` | label 位置               | <a href="#labelposition">LabelPosition</a> | `top` `right` | top    |
-| `model`          | 表单数据对象             | Object                                     | ——            | ——     |
-| `on-submit`      | 点击提交按钮后触发的回调 | <a href="#formsubmit">FormSubmit</a>       | ——            | ——     |
+| 参数             | 说明                     | 类型                                       | 可选值       | 默认值 |
+| ---------------- | ------------------------ | ------------------------------------------ | ------------ | ------ |
+| `label-width`    | label 的宽度             | string / number                            | ——           | ——     |
+| `label-position` | label 位置               | <a href="#labelposition">LabelPosition</a> | `top` `left` | left   |
+| `model`          | 表单数据对象             | Object                                     | ——           | ——     |
+| `on-submit`      | 点击提交按钮后触发的回调 | <a href="#formsubmit">FormSubmit</a>       | ——           | ——     |
 
 ## FormItem Attributes
 
@@ -193,7 +193,6 @@
 import type {
   FormInstance,
   FormProps,
-  FormParam,
   FormSubmit,
   LabelPosition,
   FormItemInstance,
@@ -203,20 +202,15 @@ import type {
 } from 'fighting-design'
 ```
 
-### FormParam
-
-```ts
-interface FormParam {
-  ok: boolean
-  res: Record<string, boolean | string>
-  evt: SubmitEvent
-}
-```
-
 ### FormSubmit
 
 ```ts
-FormSubmit = (params: FormParam) => void
+type FormSubmit = (
+  ok: boolean,
+  model: object,
+  res: Record<string, boolean | string>,
+  evt: SubmitEvent | Event
+) => void
 ```
 
 ### FormItemRulesItem
@@ -228,6 +222,7 @@ interface FormItemRulesItem {
   min?: number
   max?: number
   regExp?: RegExp
+  validator?: () => boolean
 }
 ```
 
@@ -267,8 +262,8 @@ type LabelPosition = 'left' | 'top'
     password: ''
   })
 
-  const handelSubmit2 = ({ ok, res, evt }): void => {
+  const handelSubmit2: FormSubmit = (ok, model, res, evt): void => {
     if (!ok) return
-    FMessage.primary(`ok: ${ok} res: ${res} evt: ${evt} 开始提交表单`)
+    FMessage.primary(`ok: ${ok} model:${model} res: ${res} evt: ${evt} 开始提交表单`)
   }
 </script>
diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md
@@ -89,6 +89,22 @@
 
 :::
 
+## 差异的
+
+`difference` 属性可以配在 rows 大于 3 的时候，第一个和最后一个会产生差异长度
+
+::: demo
+
+<template #source>
+<f-skeleton animated :rows="5" difference />
+</template>
+
+```html
+<f-skeleton animated :rows="5" difference />
+```
+
+:::
+
 ## 搭配组件使用
 
 ::: demo
@@ -138,13 +154,15 @@
 
 ## Attributes
 
-| 参数       | 说明                                     | 类型                                                               | 可选值                          | 默认值 |
-| ---------- | ---------------------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------ |
-| `round`    | 是否带圆角的                             | boolean                                                            | ——                              | false  |
-| `animated` | 是否展示波浪动画                         | boolean                                                            | ——                              | false  |
-| `rows`     | 渲染多行占位图                           | number                                                             | ——                              | 1      |
-| `loading`  | 为 true 时，显示占位图。false 展示子组件 | boolean                                                            | ——                              | false  |
-| `size`     | 自定义尺寸                               | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
+| 参数         | 说明                                     | 类型                                                               | 可选值                          | 默认值 |
+| ------------ | ---------------------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------ |
+| `round`      | 是否带圆角的                             | boolean                                                            | ——                              | false  |
+| `animated`   | 是否展示波浪动画                         | boolean                                                            | ——                              | false  |
+| `rows`       | 渲染多行占位图                           | number                                                             | ——                              | 1      |
+| `difference` | 首位是否有长度差异                       | boolean                                                            | ——                              | false  |
+| `row-gap`    | 自定义间距尺寸                           | number / string                                                    | ——                              | ——     |
+| `loading`    | 为 true 时，显示占位图。false 展示子组件 | boolean                                                            | ——                              | false  |
+| `size`       | 自定义尺寸                               | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
 
 ## Slots
 

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,11 +1,30 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { reactive } from 'vue'
+  import { FMessage } from 'fighting-design'
+
+  const ruleForm = reactive({
+    account: '',
+    password: ''
+  })
+
+  const handelSubmit = (): void => {
+    FMessage.primary('开始提交表单')
+  }
+</script>
 
 <template>
-  <f-trigger trigger="click" style="margin-left: 120px">
-    <f-button type="primary">click 触发</f-button>
+  {{ ruleForm }}
+  <f-form label-width="60px" :on-submit="handelSubmit" label-position="left">
+    <f-form-item label="账号">
+      <f-input v-model="ruleForm.account" type="text" placeholder="请输入账号" />
+    </f-form-item>
+
+    <f-form-item label="密码">
+      <f-input v-model="ruleForm.password" type="password" placeholder="请输入密码" />
+    </f-form-item>
 
-    <template #content>
-      <f-empty content="在这里，后续提供更多服务" />
-    </template>
-  </f-trigger>
+    <f-form-item>
+      <f-button type="primary" native-type="submit" block>提交表单</f-button>
+    </f-form-item>
+  </f-form>
 </template>