blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-10 14:39:45 +08:00
Code Issues Projects Releases Wiki Activity

docs(Form): updat demo, using inset CellGroup (#8938)

Browse Source
This commit is contained in:
neverland 2021-06-27 16:37:22 +08:00 committed by GitHub
parent 68971c0773
commit 5acf7e88bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1207 additions and 1116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/field/README.md
View File

@ -10,10 +10,11 @@ Register component globally via `app.use`, refer to [Component Registration](#/e
```js ```js
import { createApp } from 'vue'; import { createApp } from 'vue';
import { Field } from 'vant'; import { Field, CellGroup } from 'vant';
const app = createApp(); const app = createApp();
app.use(Field); app.use(Field);
app.use(CellGroup);
``` ```
## Usage ## Usage
@ -23,7 +24,7 @@ app.use(Field);
The value of field is bound with v-model. The value of field is bound with v-model.
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field v-model="value" label="Label" placeholder="Text" /> <van-field v-model="value" label="Label" placeholder="Text" />
</van-cell-group> </van-cell-group>
``` ```
@ -44,11 +45,13 @@ export default {
Use `type` prop to custom different type fields. Use `type` prop to custom different type fields.
```html ```html
<van-cell-group inset>
<van-field v-model="state.text" label="Text" /> <van-field v-model="state.text" label="Text" />
<van-field v-model="state.tel" type="tel" label="Phone" /> <van-field v-model="state.tel" type="tel" label="Phone" />
<van-field v-model="state.digit" type="digit" label="Digit" /> <van-field v-model="state.digit" type="digit" label="Digit" />
<van-field v-model="state.number" type="number" label="Number" /> <van-field v-model="state.number" type="number" label="Number" />
<van-field v-model="state.password" type="password" label="Password" /> <van-field v-model="state.password" type="password" label="Password" />
</van-cell-group>
``` ```
```js ```js
@ -72,7 +75,7 @@ export default {
### Disabled ### Disabled
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field label="Text" model-value="Input Readonly" readonly /> <van-field label="Text" model-value="Input Readonly" readonly />
<van-field label="Text" model-value="Input Disabled" disabled /> <van-field label="Text" model-value="Input Disabled" disabled />
</van-cell-group> </van-cell-group>
@ -81,7 +84,7 @@ export default {
### Show Icon ### Show Icon
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="state.value1"
label="Text" label="Text"
@ -119,7 +122,7 @@ export default {
Use `error` or `error-message` to show error info. Use `error` or `error-message` to show error info.
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field <van-field
v-model="username" v-model="username"
error error
@ -142,11 +145,13 @@ Use `error` or `error-message` to show error info.
Use button slot to insert button. Use button slot to insert button.
```html ```html
<van-cell-group inset>
<van-field v-model="sms" center clearable label="SMS" placeholder="SMS"> <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
<template #button> <template #button>
<van-button size="small" type="primary">Send SMS</van-button> <van-button size="small" type="primary">Send SMS</van-button>
</template> </template>
</van-field> </van-field>
</van-cell-group>
``` ```
### Format Value ### Format Value
@ -154,6 +159,7 @@ Use button slot to insert button.
Use `formatter` prop to format the input value. Use `formatter` prop to format the input value.
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="state.value1"
label="Text" label="Text"
@ -167,6 +173,7 @@ Use `formatter` prop to format the input value.
format-trigger="onBlur" format-trigger="onBlur"
placeholder="Format On Blur" placeholder="Format On Blur"
/> />
</van-cell-group>
``` ```
```js ```js
@ -193,6 +200,7 @@ export default {
Textarea Field can be auto resize when has `autosize` prop. Textarea Field can be auto resize when has `autosize` prop.
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="message" v-model="message"
label="Message" label="Message"
@ -201,11 +209,13 @@ Textarea Field can be auto resize when has `autosize` prop.
rows="1" rows="1"
autosize autosize
/> />
</van-cell-group>
``` ```
### Show Word Limit ### Show Word Limit
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="message" v-model="message"
rows="2" rows="2"
@ -216,6 +226,7 @@ Textarea Field can be auto resize when has `autosize` prop.
placeholder="Message" placeholder="Message"
show-word-limit show-word-limit
/> />
</van-cell-group>
``` ```
### Input Align ### 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. Use `input-align` prop to align the input value.
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="value" v-model="value"
label="Text" label="Text"
placeholder="Input Align Right" placeholder="Input Align Right"
input-align="right" input-align="right"
/> />
</van-cell-group>
``` ```
## API ## API
@ -267,7 +280,7 @@ Use `input-align` prop to align the input value.
| label-width | Label width | _number \| string_ | `6.2em` | | label-width | Label width | _number \| string_ | `6.2em` |
| label-align | Label align, can be set to `center` `right` | _string_ | `left` | | label-align | Label align, can be set to `center` `right` | _string_ | `left` |
| input-align | Input 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,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` | | autosize | Textarea auto resize，can accept an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
| left-icon | Left side icon name | _string_ | - | | left-icon | Left side icon name | _string_ | - |
| right-icon | Right side icon name | _string_ | - | | right-icon | Right side icon name | _string_ | - |
| icon-prefix | Icon className prefix | _string_ | `van-icon` | | icon-prefix | Icon className prefix | _string_ | `van-icon` |
@ -276,8 +289,6 @@ Use `input-align` prop to align the input value.
### Events ### Events
Field support all native events of input tag
| Event | Description | Parameters | | Event | Description | Parameters |
| --- | --- | --- | | --- | --- | --- |
| update:model-value | Emitted when input value changed | _value: string_ | | update:model-value | Emitted when input value changed | _value: string_ |

25
src/field/README.zh-CN.md
View File

@ -10,10 +10,11 @@
```js ```js
import { createApp } from 'vue'; import { createApp } from 'vue';
import { Field } from 'vant'; import { Field, CellGroup } from 'vant';
const app = createApp(); const app = createApp();
app.use(Field); app.use(Field);
app.use(CellGroup);
``` ```
## 代码演示 ## 代码演示
@ -23,8 +24,8 @@ app.use(Field);
可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。 可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
```html ```html
<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 --> <!-- 可以使用 CellGroup 作为容器 -->
<van-cell-group> <van-cell-group inset>
<van-field v-model="value" label="文本" placeholder="请输入用户名" /> <van-field v-model="value" label="文本" placeholder="请输入用户名" />
</van-cell-group> </van-cell-group>
``` ```
@ -45,6 +46,7 @@ export default {
根据 `type` 属性定义不同类型的输入框，默认值为 `text`。 根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
```html ```html
<van-cell-group inset>
<!-- 输入任意文本 --> <!-- 输入任意文本 -->
<van-field v-model="state.text" label="文本" /> <van-field v-model="state.text" label="文本" />
<!-- 输入手机号，调起手机号键盘 --> <!-- 输入手机号，调起手机号键盘 -->
@ -55,6 +57,7 @@ export default {
<van-field v-model="state.number" type="number" label="数字" /> <van-field v-model="state.number" type="number" label="数字" />
<!-- 输入密码 --> <!-- 输入密码 -->
<van-field v-model="state.password" type="password" label="密码" /> <van-field v-model="state.password" type="password" label="密码" />
</van-cell-group>
``` ```
```js ```js
@ -80,7 +83,7 @@ export default {
通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。 通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field label="文本" model-value="输入框只读" readonly /> <van-field label="文本" model-value="输入框只读" readonly />
<van-field label="文本" model-value="输入框已禁用" disabled /> <van-field label="文本" model-value="输入框已禁用" disabled />
</van-cell-group> </van-cell-group>
@ -91,7 +94,7 @@ export default {
通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。 通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="state.value1"
label="文本" label="文本"
@ -129,7 +132,7 @@ export default {
设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。 设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
```html ```html
<van-cell-group> <van-cell-group inset>
<van-field <van-field
v-model="username" v-model="username"
error error
@ -152,6 +155,7 @@ export default {
通过 button 插槽可以在输入框尾部插入按钮。 通过 button 插槽可以在输入框尾部插入按钮。
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="sms" v-model="sms"
center center
@ -163,6 +167,7 @@ export default {
<van-button size="small" type="primary">发送验证码</van-button> <van-button size="small" type="primary">发送验证码</van-button>
</template> </template>
</van-field> </van-field>
</van-cell-group>
``` ```
### 格式化输入内容 ### 格式化输入内容
@ -170,6 +175,7 @@ export default {
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。 通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="state.value1"
label="文本" label="文本"
@ -183,6 +189,7 @@ export default {
format-trigger="onBlur" format-trigger="onBlur"
placeholder="在失焦时执行格式化" placeholder="在失焦时执行格式化"
/> />
</van-cell-group>
``` ```
```js ```js
@ -210,6 +217,7 @@ export default {
对于 textarea，可以通过 `autosize` 属性设置高度自适应。 对于 textarea，可以通过 `autosize` 属性设置高度自适应。
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="message" v-model="message"
rows="1" rows="1"
@ -218,6 +226,7 @@ export default {
type="textarea" type="textarea"
placeholder="请输入留言" placeholder="请输入留言"
/> />
</van-cell-group>
``` ```
### 显示字数统计 ### 显示字数统计
@ -225,6 +234,7 @@ export default {
设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。 设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="message" v-model="message"
rows="2" rows="2"
@ -235,6 +245,7 @@ export default {
placeholder="请输入留言" placeholder="请输入留言"
show-word-limit show-word-limit
/> />
</van-cell-group>
``` ```
### 输入框内容对齐 ### 输入框内容对齐
@ -242,12 +253,14 @@ export default {
通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。 通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
```html ```html
<van-cell-group inset>
<van-field <van-field
v-model="value" v-model="value"
label="文本" label="文本"
placeholder="输入框内容右对齐" placeholder="输入框内容右对齐"
input-align="right" input-align="right"
/> />
</van-cell-group>
``` ```
## API ## API

2
src/field/demo/Autosize.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block :title="t('autosize')"> <demo-block :title="t('autosize')">
<van-cell-group inset>
<van-field <van-field
v-model="value" v-model="value"
autosize autosize
@ -8,6 +9,7 @@
:label="t('message')" :label="t('message')"
:placeholder="t('placeholder')" :placeholder="t('placeholder')"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/BasicUsage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-cell-group> <van-cell-group inset>
<van-field <van-field
v-model="value" v-model="value"
:label="t('label')" :label="t('label')"

2
src/field/demo/CustomType.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block :title="t('customType')"> <demo-block :title="t('customType')">
<van-cell-group inset>
<van-field <van-field
v-model="text" v-model="text"
:label="t('text')" :label="t('text')"
@ -29,6 +30,7 @@
:label="t('password')" :label="t('password')"
:placeholder="t('passwordPlaceholder')" :placeholder="t('passwordPlaceholder')"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

14
src/field/demo/Disabled.vue
View File

@ -1,7 +1,17 @@
<template> <template>
<demo-block :title="t('disabled')"> <demo-block :title="t('disabled')">
<van-field :model-value="t('inputReadonly')" :label="t('text')" readonly /> <van-cell-group inset>
<van-field :model-value="t('inputDisabled')" :label="t('text')" disabled /> <van-field
:model-value="t('inputReadonly')"
:label="t('text')"
readonly
/>
<van-field
:model-value="t('inputDisabled')"
:label="t('text')"
disabled
/>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/ErrorInfo.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block :title="t('errorInfo')"> <demo-block :title="t('errorInfo')">
<van-cell-group inset>
<van-field <van-field
v-model="username" v-model="username"
error error
@ -14,6 +15,7 @@
:placeholder="t('phonePlaceholder')" :placeholder="t('phonePlaceholder')"
:error-message="t('phoneError')" :error-message="t('phoneError')"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/FormatValue.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block v-if="!isWeapp" :title="t('formatValue')"> <demo-block v-if="!isWeapp" :title="t('formatValue')">
<van-cell-group inset>
<van-field <van-field
v-model="value1" v-model="value1"
:label="t('text')" :label="t('text')"
@ -13,6 +14,7 @@
format-trigger="onBlur" format-trigger="onBlur"
:placeholder="t('formatOnBlur')" :placeholder="t('formatOnBlur')"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/InputAlign.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<demo-block :title="t('inputAlign')"> <demo-block :title="t('inputAlign')">
<van-cell-group inset>
<van-field <van-field
v-model="value" v-model="value"
:label="t('text')" :label="t('text')"
:placeholder="t('alignPlaceHolder')" :placeholder="t('alignPlaceHolder')"
input-align="right" input-align="right"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/InsertButton.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block :title="t('insertButton')"> <demo-block :title="t('insertButton')">
<van-cell-group inset>
<van-field <van-field
v-model="sms" v-model="sms"
center center
@ -13,6 +14,7 @@
</van-button> </van-button>
</template> </template>
</van-field> </van-field>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/ShowIcon.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block :title="t('showIcon')"> <demo-block :title="t('showIcon')">
<van-cell-group inset>
<van-field <van-field
v-model="icon1" v-model="icon1"
:label="t('text')" :label="t('text')"
@ -14,6 +15,7 @@
left-icon="music-o" left-icon="music-o"
:placeholder="t('showClearIcon')" :placeholder="t('showClearIcon')"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

2
src/field/demo/ShowWordLimit.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<demo-block v-if="!isWeapp" :title="t('showWordLimit')"> <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
<van-cell-group inset>
<van-field <van-field
v-model="value" v-model="value"
autosize autosize
@ -10,6 +11,7 @@
:label="t('message')" :label="t('message')"
:placeholder="t('placeholder')" :placeholder="t('placeholder')"
/> />
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

20
src/field/test/__snapshots__/demo.spec.ts.snap
View File

@ -2,7 +2,7 @@
exports[`should render demo and match snapshot 1`] = ` exports[`should render demo and match snapshot 1`] = `
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -21,6 +21,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -99,7 +100,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -131,7 +134,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-field__left-icon"> <div class="van-field__left-icon">
<i class="van-badge__wrapper van-icon van-icon-smile-o"> <i class="van-badge__wrapper van-icon van-icon-smile-o">
@ -175,7 +180,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-cell--required van-field van-field--error"> <div class="van-cell van-cell--required van-field van-field--error">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -210,7 +217,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-cell--center van-field"> <div class="van-cell van-cell--center van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -238,7 +247,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -270,7 +281,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value"> <div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body"> <div class="van-field__body">
@ -284,7 +297,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -309,7 +324,9 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -326,4 +343,5 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;

7
src/form/README.md
View File

@ -10,11 +10,12 @@ Register component globally via `app.use`, refer to [Component Registration](#/e
```js ```js
import { createApp } from 'vue'; import { createApp } from 'vue';
import { Form, Field } from 'vant'; import { Form, Field, CellGroup } from 'vant';
const app = createApp(); const app = createApp();
app.use(Form); app.use(Form);
app.use(Field); app.use(Field);
app.use(CellGroup);
``` ```
## Usage ## Usage
@ -23,6 +24,7 @@ app.use(Field);
```html ```html
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset>
<van-field <van-field
v-model="state.username" v-model="state.username"
name="Username" name="Username"
@ -38,6 +40,7 @@ app.use(Field);
placeholder="Password" placeholder="Password"
:rules="[{ required: true, message: 'Password is required' }]" :rules="[{ required: true, message: 'Password is required' }]"
/> />
</van-cell-group>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
Submit Submit
@ -71,6 +74,7 @@ export default {
```html ```html
<van-form @failed="onFailed"> <van-form @failed="onFailed">
<van-cell-group inset>
<van-field <van-field
v-model="state.value1" v-model="state.value1"
name="pattern" name="pattern"
@ -95,6 +99,7 @@ export default {
placeholder="Use async validator" placeholder="Use async validator"
:rules="[{ validator: asyncValidator, message: 'Error message' }]" :rules="[{ validator: asyncValidator, message: 'Error message' }]"
/> />
</van-cell-group>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
Submit Submit

7
src/form/README.zh-CN.md
View File

@ -10,11 +10,12 @@
```js ```js
import { createApp } from 'vue'; import { createApp } from 'vue';
import { Form, Field } from 'vant'; import { Form, Field, CellGroup } from 'vant';
const app = createApp(); const app = createApp();
app.use(Form); app.use(Form);
app.use(Field); app.use(Field);
app.use(CellGroup);
``` ```
## 代码演示 ## 代码演示
@ -25,6 +26,7 @@ app.use(Field);
```html ```html
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset>
<van-field <van-field
v-model="state.username" v-model="state.username"
name="用户名" name="用户名"
@ -40,6 +42,7 @@ app.use(Field);
placeholder="密码" placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]" :rules="[{ required: true, message: '请填写密码' }]"
/> />
</van-cell-group>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
提交 提交
@ -75,6 +78,7 @@ export default {
```html ```html
<van-form @failed="onFailed"> <van-form @failed="onFailed">
<van-cell-group inset>
<!-- 通过 pattern 进行正则校验 --> <!-- 通过 pattern 进行正则校验 -->
<van-field <van-field
v-model="state.value1" v-model="state.value1"
@ -103,6 +107,7 @@ export default {
placeholder="异步函数校验" placeholder="异步函数校验"
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
/> />
</van-cell-group>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
提交 提交

3
src/form/demo/BasicUsage.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-form @submit="onSubmit" @failed="onFailed"> <van-form @submit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field <van-field
v-model="username" v-model="username"
name="username" name="username"
@ -16,6 +17,8 @@
:rules="[{ required: true, message: t('requirePassword') }]" :rules="[{ required: true, message: t('requirePassword') }]"
:placeholder="t('password')" :placeholder="t('password')"
/> />
</van-cell-group>
<div style="margin: 16px 16px 0"> <div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
{{ t('submit') }} {{ t('submit') }}

2
src/form/demo/FieldType.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<demo-block :title="t('fieldType')"> <demo-block :title="t('fieldType')">
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset>
<van-field name="switch" :label="t('switch')"> <van-field name="switch" :label="t('switch')">
<template #input> <template #input>
<van-switch v-model="switchChecked" size="20" /> <van-switch v-model="switchChecked" size="20" />
@ -63,6 +64,7 @@
<field-type-datetime-picker /> <field-type-datetime-picker />
<field-type-area /> <field-type-area />
<field-type-calendar /> <field-type-calendar />
</van-cell-group>
<div style="margin: 16px 16px 0"> <div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">

2
src/form/demo/ValidateRules.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<demo-block :title="t('title')"> <demo-block :title="t('title')">
<van-form @sumbit="onSubmit" @failed="onFailed"> <van-form @sumbit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field <van-field
v-model="value1" v-model="value1"
name="pattern" name="pattern"
@ -29,6 +30,7 @@
:rules="[{ validator: asyncValidator, message: t('message') }]" :rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')" :placeholder="t('asyncValidator')"
/> />
</van-cell-group>
<div style="margin: 16px 16px 0"> <div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
{{ t('submit') }} {{ t('submit') }}

6
src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -3,6 +3,7 @@
exports[`should render demo and match snapshot 1`] = ` exports[`should render demo and match snapshot 1`] = `
<div> <div>
<form class="van-form"> <form class="van-form">
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -35,6 +36,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div style="margin: 16px 16px 0px;"> <div style="margin: 16px 16px 0px;">
<button type="submit" <button type="submit"
class="van-button van-button--primary van-button--normal van-button--block van-button--round" class="van-button van-button--primary van-button--normal van-button--block van-button--round"
@ -50,6 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<form class="van-form"> <form class="van-form">
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -114,6 +117,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div style="margin: 16px 16px 0px;"> <div style="margin: 16px 16px 0px;">
<button type="submit" <button type="submit"
class="van-button van-button--primary van-button--normal van-button--block van-button--round" class="van-button van-button--primary van-button--normal van-button--block van-button--round"
@ -129,6 +133,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<form class="van-form"> <form class="van-form">
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label">
<span> <span>
@ -507,6 +512,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div style="margin: 16px 16px 0px;"> <div style="margin: 16px 16px 0px;">
<button type="submit" <button type="submit"
class="van-button van-button--primary van-button--normal van-button--block van-button--round" class="van-button van-button--primary van-button--normal van-button--block van-button--round"