diff --git a/src/field/README.md b/src/field/README.md index cdecf50bb..8ce07a8f4 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -10,10 +10,11 @@ Register component globally via `app.use`, refer to [Component Registration](#/e ```js import { createApp } from 'vue'; -import { Field } from 'vant'; +import { Field, CellGroup } from 'vant'; const app = createApp(); app.use(Field); +app.use(CellGroup); ``` ## Usage @@ -23,7 +24,7 @@ app.use(Field); The value of field is bound with v-model. ```html - + ``` @@ -44,11 +45,13 @@ export default { Use `type` prop to custom different type fields. ```html - - - - - + + + + + + + ``` ```js @@ -72,7 +75,7 @@ export default { ### Disabled ```html - + @@ -81,7 +84,7 @@ export default { ### Show Icon ```html - + + - - + + + + + ``` ### Format Value @@ -154,19 +159,21 @@ Use button slot to insert button. Use `formatter` prop to format the input value. ```html - - + + + + ``` ```js @@ -193,29 +200,33 @@ export default { Textarea Field can be auto resize when has `autosize` prop. ```html - + + + ``` ### Show Word Limit ```html - + + + ``` ### Input Align @@ -223,12 +234,14 @@ Textarea Field can be auto resize when has `autosize` prop. Use `input-align` prop to align the input value. ```html - + + + ``` ## API @@ -267,7 +280,7 @@ Use `input-align` prop to align the input value. | label-width | Label width | _number \| string_ | `6.2em` | | label-align | Label align, can be set to `center` `right` | _string_ | `left` | | input-align | Input align, can be set to `center` `right` | _string_ | `left` | -| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` | +| autosize | Textarea auto resize，can accept an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` | | left-icon | Left side icon name | _string_ | - | | right-icon | Right side icon name | _string_ | - | | icon-prefix | Icon className prefix | _string_ | `van-icon` | @@ -276,8 +289,6 @@ Use `input-align` prop to align the input value. ### Events -Field support all native events of input tag - | Event | Description | Parameters | | --- | --- | --- | | update:model-value | Emitted when input value changed | _value: string_ | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 73ffbfd71..f2096f245 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -10,10 +10,11 @@ ```js import { createApp } from 'vue'; -import { Field } from 'vant'; +import { Field, CellGroup } from 'vant'; const app = createApp(); app.use(Field); +app.use(CellGroup); ``` ## 代码演示 @@ -23,8 +24,8 @@ app.use(Field); 可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。 ```html - - + + ``` @@ -45,16 +46,18 @@ export default { 根据 `type` 属性定义不同类型的输入框，默认值为 `text`。 ```html - - - - - - - - - - + + + + + + + + + + + + ``` ```js @@ -80,7 +83,7 @@ export default { 通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。 ```html - + @@ -91,7 +94,7 @@ export default { 通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。 ```html - + + - - + + + + + ``` ### 格式化输入内容 @@ -170,19 +175,21 @@ export default { 通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。 ```html - - + + + + ``` ```js @@ -210,14 +217,16 @@ export default { 对于 textarea，可以通过 `autosize` 属性设置高度自适应。 ```html - + + + ``` ### 显示字数统计 @@ -225,16 +234,18 @@ export default { 设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。 ```html - + + + ``` ### 输入框内容对齐 @@ -242,12 +253,14 @@ export default { 通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。 ```html - + + + ``` ## API diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue index 490edf1f6..609befe4d 100644 --- a/src/field/demo/Autosize.vue +++ b/src/field/demo/Autosize.vue @@ -1,13 +1,15 @@ diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue index dbc42b232..d83d9e7c3 100644 --- a/src/field/demo/BasicUsage.vue +++ b/src/field/demo/BasicUsage.vue @@ -1,6 +1,6 @@ diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue index ce0d4ad8a..ea285c592 100644 --- a/src/field/demo/Disabled.vue +++ b/src/field/demo/Disabled.vue @@ -1,7 +1,17 @@ diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue index 2e650ffef..73b4a711c 100644 --- a/src/field/demo/ErrorInfo.vue +++ b/src/field/demo/ErrorInfo.vue @@ -1,19 +1,21 @@ diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue index 126301dd9..d30f72370 100644 --- a/src/field/demo/FormatValue.vue +++ b/src/field/demo/FormatValue.vue @@ -1,18 +1,20 @@ diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue index 36e9ad392..b38a3ec27 100644 --- a/src/field/demo/InputAlign.vue +++ b/src/field/demo/InputAlign.vue @@ -1,11 +1,13 @@ diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue index eb4bd3c5f..5faeff34d 100644 --- a/src/field/demo/InsertButton.vue +++ b/src/field/demo/InsertButton.vue @@ -1,18 +1,20 @@ diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue index 02883c2f8..ef3a53bd8 100644 --- a/src/field/demo/ShowIcon.vue +++ b/src/field/demo/ShowIcon.vue @@ -1,19 +1,21 @@ diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue index 2417bbf14..159b0d020 100644 --- a/src/field/demo/ShowWordLimit.vue +++ b/src/field/demo/ShowWordLimit.vue @@ -1,15 +1,17 @@ diff --git a/src/field/test/__snapshots__/demo.spec.ts.snap b/src/field/test/__snapshots__/demo.spec.ts.snap index 755255e22..efb630e62 100644 --- a/src/field/test/__snapshots__/demo.spec.ts.snap +++ b/src/field/test/__snapshots__/demo.spec.ts.snap @@ -2,7 +2,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -21,307 +21,325 @@ exports[`should render demo and match snapshot 1`] = `
-
-
- - Text - -
-
-
- -
-
-
-
-
- - Phone - -
-
-
- -
-
-
-
-
- - Digit - -
-
-
- -
-
-
-
-
- - Number - -
-
-
- -
-
-
-
-
- - Password - -
-
-
- -
-
-
-
-
-
-
- - Text - -
-
-
- -
-
-
-
-
- - Text - -
-
-
- -
-
-
-
-
-
-
- - -
-
- - Text - -
-
-
- -
- - -
-
-
-
-
-
- - -
-
- - Text - -
-
-
- -
-
-
-
-
-
-
- - Username - -
-
-
- -
-
-
-
-
- - Phone - -
-
-
- -
-
- Invalid phone -
-
-
-
-
-
-
- - SMS - -
-
-
- -
- -
-
-
-
-
-
-
-
- - Text - -
-
-
- -
-
-
-
-
- - Text - -
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- - Message - -
-
-
- -
-
- - 0 +
+
+
+ + Text - /50 +
+
+
+ +
+
+
+
+
+ + Phone + +
+
+
+ +
+
+
+
+
+ + Digit + +
+
+
+ +
+
+
+
+
+ + Number + +
+
+
+ +
+
+
+
+
+ + Password + +
+
+
+ +
-
-
- - Text - +
+
+
+ + Text + +
+
+
+ +
+
-
-
- +
+
+ + Text + +
+
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+ + Text + +
+
+
+ +
+ + +
+
+
+
+
+
+ + +
+
+ + Text + +
+
+
+ +
+
+
+
+
+
+
+
+
+ + Username + +
+
+
+ +
+
+
+
+
+ + Phone + +
+
+
+ +
+
+ Invalid phone +
+
+
+
+
+
+
+
+
+ + SMS + +
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+ + Text + +
+
+
+ +
+
+
+
+
+ + Text + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + Message + +
+
+
+ +
+
+ + 0 + + /50 +
+
+
+
+
+
+
+
+
+ + Text + +
+
+
+ +
diff --git a/src/form/README.md b/src/form/README.md index c76fd8c93..6268c855a 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -10,11 +10,12 @@ Register component globally via `app.use`, refer to [Component Registration](#/e ```js import { createApp } from 'vue'; -import { Form, Field } from 'vant'; +import { Form, Field, CellGroup } from 'vant'; const app = createApp(); app.use(Form); app.use(Field); +app.use(CellGroup); ``` ## Usage @@ -23,21 +24,23 @@ app.use(Field); ```html - - + + + +
Submit @@ -71,30 +74,32 @@ export default { ```html - - - - + + + + + +
Submit diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 6f7c447fc..10af58119 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -10,11 +10,12 @@ ```js import { createApp } from 'vue'; -import { Form, Field } from 'vant'; +import { Form, Field, CellGroup } from 'vant'; const app = createApp(); app.use(Form); app.use(Field); +app.use(CellGroup); ``` ## 代码演示 @@ -25,21 +26,23 @@ app.use(Field); ```html - - + + + +
提交 @@ -75,34 +78,36 @@ export default { ```html - - - - - - - - + + + + + + + + + +
提交 diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue index b8168ad9a..7d69289d0 100644 --- a/src/form/demo/BasicUsage.vue +++ b/src/form/demo/BasicUsage.vue @@ -1,21 +1,24 @@