feat: ✨ 新增 Form 表单组件

Moonofweisheng · Dec 23, 2023 · c8086d6 · c8086d6
1 parent ed56bcd
commit c8086d6
Show file tree

Hide file tree

Showing 41 changed files with 2,456 additions and 844 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2023-12-07 15:08:32
+ * @LastEditTime: 2023-12-21 22:27:02
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\docs\.vitepress\config.ts
@@ -231,10 +231,13 @@ export default defineConfig({
             text: "DatetimePickerView 时间选择器视图"
           }, {
             link: "/component/form",
-            text: "Form 表单组合"
+            text: "Form 表单"
           }, {
             link: "/component/input",
             text: "Input 输入框"
+          }, {
+            link: "/component/textarea",
+            text: "Textarea 文本域"
           }, {
             link: "/component/input-number",
             text: "InputNumber 计数器"

diff --git a/docs/component/calendar.md b/docs/component/calendar.md
@@ -397,6 +397,17 @@ function handleConfirm4({ value }) {
 | close-on-click-modal   | 点击遮罩是否关闭                                                                                    | boolean               | -                                                                                           | true                  | -        |
 | z-index                | 弹窗层级                                                                                            | number                | -                                                                                           | 15                    | -        |
 | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型）                                                 | boolean               | -                                                                                           | true                  | -        |
+| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
+| rules | 表单验证规则	 | `FormItemRule []`	 | - | `[]` | - |
+
+### FormItemRule 数据结构
+
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段	 | `boolean` |
+| message | 错误提示文案	 | `string` |
+| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
+| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
 
 ## Events
 

diff --git a/docs/component/cell.md b/docs/component/cell.md
@@ -35,10 +35,10 @@
 ```scss
 .cell-icon {
   display: block;
+  box-sizing: border-box;
   width: 16px;
   height: 16px;
-  margin-top: 2px;
-  margin-right: 15px;
+  margin-right: 4px;
   background: url('https://img10.360buyimg.com/jmadvertisement/jfs/t1/71075/7/3762/1820/5d1f26d1E0d600b9e/a264c901943080ac.png') no-repeat;
   background-size: cover;
 }
@@ -198,10 +198,11 @@ function handleSwitchChange({ value }) {
 ```scss
 .cell-icon {
   display: block;
+  box-sizing: border-box;
+  padding: 4px 0;
   width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  margin-right: 15px;
+  height: 24px;
+  margin-right: 4px;
   background: url('https://img10.360buyimg.com/jmadvertisement/jfs/t1/71075/7/3762/1820/5d1f26d1E0d600b9e/a264c901943080ac.png') no-repeat;
   background-size: cover;
 }
@@ -251,6 +252,18 @@ function handleSwitchChange({ value }) {
 | center      | 是否垂直居中，默认顶部居中     | boolean | -      | false  | -        |
 | required    | 表单属性，必填                 | boolean | -      | false  | -        |
 | vertical    | 表单属性，上下结构             | boolean | -      | false  | -        |
+| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
+| rules | 表单验证规则	 | `FormItemRule []`	 | - | `[]` | - |
+
+### FormItemRule 数据结构
+
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段	 | `boolean` |
+| message | 错误提示文案	 | `string` |
+| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
+| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
+
 
 ## Cell Events
 

diff --git a/docs/component/col-picker.md b/docs/component/col-picker.md
@@ -525,6 +525,17 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
 | z-index                | 弹窗层级                                                                                                                       | number   | -      | 15      | -        |
 | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型）                                                                            | boolean  | -      | true    | -        |
 | ellipsis               | 是否超出隐藏                                                                                                                   | boolean  | -      | false   | -        |
+| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
+| rules | 表单验证规则	 | `FormItemRule []`	 | - | `[]` | - |
+
+### FormItemRule 数据结构
+
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段	 | `boolean` |
+| message | 错误提示文案	 | `string` |
+| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
+| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
 
 ## 选项数据结构
 

diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md
@@ -284,6 +284,17 @@ const displayFormatTabLabel = (items) => {
 | z-index | 弹窗层级 | number | - | 15 | - |
 | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
 | ellipsis | 是否超出隐藏 | boolean | - | false | - |
+| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
+| rules | 表单验证规则	 | `FormItemRule []`	 | - | `[]` | - |
+
+### FormItemRule 数据结构
+
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段	 | `boolean` |
+| message | 错误提示文案	 | `string` |
+| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
+| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
 
 ## Events