diff --git a/docs/components/form.md b/docs/components/form.md index bed430569a..6dc30beb8a 100644 --- a/docs/components/form.md +++ b/docs/components/form.md @@ -101,16 +101,16 @@ @@ -151,12 +151,12 @@ ## Form Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ---------------- | ------------------------ | ------------------------------------------ | ------------- | ------ | -| `label-width` | label 的宽度 | string / number | —— | —— | -| `label-position` | label 位置 | LabelPosition | `top` `right` | top | -| `model` | 表单数据对象 | Object | —— | —— | -| `on-submit` | 点击提交按钮后触发的回调 | FormSubmit | —— | —— | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ---------------- | ------------------------ | ------------------------------------------ | ------------ | ------ | +| `label-width` | label 的宽度 | string / number | —— | —— | +| `label-position` | label 位置 | LabelPosition | `top` `left` | left | +| `model` | 表单数据对象 | Object | —— | —— | +| `on-submit` | 点击提交按钮后触发的回调 | FormSubmit | —— | —— | ## 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 - evt: SubmitEvent -} -``` - ### FormSubmit ```ts -FormSubmit = (params: FormParam) => void +type FormSubmit = ( + ok: boolean, + model: object, + res: Record, + 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} 开始提交表单`) } diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md index cbba6507ef..5464d84bb3 100644 --- a/docs/components/skeleton.md +++ b/docs/components/skeleton.md @@ -89,6 +89,22 @@ ::: +## 差异的 + +`difference` 属性可以配在 rows 大于 3 的时候,第一个和最后一个会产生差异长度 + +::: demo + + + +```html + +``` + +::: + ## 搭配组件使用 ::: demo @@ -138,13 +154,15 @@ ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ---------- | ---------------------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------ | -| `round` | 是否带圆角的 | boolean | —— | false | -| `animated` | 是否展示波浪动画 | boolean | —— | false | -| `rows` | 渲染多行占位图 | number | —— | 1 | -| `loading` | 为 true 时,显示占位图。false 展示子组件 | boolean | —— | false | -| `size` | 自定义尺寸 | FightingSize | `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` | 自定义尺寸 | FightingSize | `large` `middle` `small` `mini` | middle | ## Slots diff --git a/start/src/App.vue b/start/src/App.vue index 8c8a9d54fe..955f768869 100644 --- a/start/src/App.vue +++ b/start/src/App.vue @@ -1,11 +1,30 @@ - +