blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +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

121
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-field v-model="state.text" label="Text" /> <van-cell-group inset>
<van-field v-model="state.tel" type="tel" label="Phone" /> <van-field v-model="state.text" label="Text" />
<van-field v-model="state.digit" type="digit" label="Digit" /> <van-field v-model="state.tel" type="tel" label="Phone" />
<van-field v-model="state.number" type="number" label="Number" /> <van-field v-model="state.digit" type="digit" label="Digit" />
<van-field v-model="state.password" type="password" label="Password" /> <van-field v-model="state.number" type="number" label="Number" />
<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-field v-model="sms" center clearable label="SMS" placeholder="SMS"> <van-cell-group inset>
<template #button> <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
<van-button size="small" type="primary">Send SMS</van-button> <template #button>
</template> <van-button size="small" type="primary">Send SMS</van-button>
</van-field> </template>
</van-field>
</van-cell-group>
``` ```
### Format Value ### Format Value
@ -154,19 +159,21 @@ 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-field <van-cell-group inset>
v-model="state.value1" <van-field
label="Text" v-model="state.value1"
:formatter="formatter" label="Text"
placeholder="Format On Change" :formatter="formatter"
/> placeholder="Format On Change"
<van-field />
v-model="state.value2" <van-field
label="Text" v-model="state.value2"
:formatter="formatter" label="Text"
format-trigger="onBlur" :formatter="formatter"
placeholder="Format On Blur" format-trigger="onBlur"
/> placeholder="Format On Blur"
/>
</van-cell-group>
``` ```
```js ```js
@ -193,29 +200,33 @@ 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-field <van-cell-group inset>
v-model="message" <van-field
label="Message" v-model="message"
type="textarea" label="Message"
placeholder="Message" type="textarea"
rows="1" placeholder="Message"
autosize rows="1"
/> autosize
/>
</van-cell-group>
``` ```
### Show Word Limit ### Show Word Limit
```html ```html
<van-field <van-cell-group inset>
v-model="message" <van-field
rows="2" v-model="message"
autosize rows="2"
label="Message" autosize
type="textarea" label="Message"
maxlength="50" type="textarea"
placeholder="Message" maxlength="50"
show-word-limit placeholder="Message"
/> 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-field <van-cell-group inset>
v-model="value" <van-field
label="Text" v-model="value"
placeholder="Input Align Right" label="Text"
input-align="right" placeholder="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_ |

141
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,16 +46,18 @@ 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="文本" />
<van-field v-model="state.tel" type="tel" label="手机号" /> <!-- 输入手机号，调起手机号键盘 -->
<!-- 允许输入正整数，调起纯数字键盘 --> <van-field v-model="state.tel" type="tel" label="手机号" />
<van-field v-model="state.digit" type="digit" label="整数" /> <!-- 允许输入正整数，调起纯数字键盘 -->
<!-- 允许输入数字，调起带符号的纯数字键盘 --> <van-field v-model="state.digit" type="digit" label="整数" />
<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,17 +155,19 @@ export default {
通过 button 插槽可以在输入框尾部插入按钮。 通过 button 插槽可以在输入框尾部插入按钮。
```html ```html
<van-field <van-cell-group inset>
v-model="sms" <van-field
center v-model="sms"
clearable center
label="短信验证码" clearable
placeholder="请输入短信验证码" label="短信验证码"
> placeholder="请输入短信验证码"
<template #button> >
<van-button size="small" type="primary">发送验证码</van-button> <template #button>
</template> <van-button size="small" type="primary">发送验证码</van-button>
</van-field> </template>
</van-field>
</van-cell-group>
``` ```
### 格式化输入内容 ### 格式化输入内容
@ -170,19 +175,21 @@ export default {
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。 通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
```html ```html
<van-field <van-cell-group inset>
v-model="state.value1" <van-field
label="文本" v-model="state.value1"
:formatter="formatter" label="文本"
placeholder="在输入时执行格式化" :formatter="formatter"
/> placeholder="在输入时执行格式化"
<van-field />
v-model="state.value2" <van-field
label="文本" v-model="state.value2"
:formatter="formatter" label="文本"
format-trigger="onBlur" :formatter="formatter"
placeholder="在失焦时执行格式化" format-trigger="onBlur"
/> placeholder="在失焦时执行格式化"
/>
</van-cell-group>
``` ```
```js ```js
@ -210,14 +217,16 @@ export default {
对于 textarea，可以通过 `autosize` 属性设置高度自适应。 对于 textarea，可以通过 `autosize` 属性设置高度自适应。
```html ```html
<van-field <van-cell-group inset>
v-model="message" <van-field
rows="1" v-model="message"
autosize rows="1"
label="留言" autosize
type="textarea" label="留言"
placeholder="请输入留言" type="textarea"
/> placeholder="请输入留言"
/>
</van-cell-group>
``` ```
### 显示字数统计 ### 显示字数统计
@ -225,16 +234,18 @@ export default {
设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。 设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
```html ```html
<van-field <van-cell-group inset>
v-model="message" <van-field
rows="2" v-model="message"
autosize rows="2"
label="留言" autosize
type="textarea" label="留言"
maxlength="50" type="textarea"
placeholder="请输入留言" maxlength="50"
show-word-limit placeholder="请输入留言"
/> show-word-limit
/>
</van-cell-group>
``` ```
### 输入框内容对齐 ### 输入框内容对齐
@ -242,12 +253,14 @@ export default {
通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。 通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
```html ```html
<van-field <van-cell-group inset>
v-model="value" <van-field
label="文本" v-model="value"
placeholder="输入框内容右对齐" label="文本"
input-align="right" placeholder="输入框内容右对齐"
/> input-align="right"
/>
</van-cell-group>
``` ```
## API ## API

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

@ -1,13 +1,15 @@
<template> <template>
<demo-block :title="t('autosize')"> <demo-block :title="t('autosize')">
<van-field <van-cell-group inset>
v-model="value" <van-field
autosize v-model="value"
rows="1" autosize
type="textarea" rows="1"
:label="t('message')" type="textarea"
:placeholder="t('placeholder')" :label="t('message')"
/> :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')"

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

@ -1,34 +1,36 @@
<template> <template>
<demo-block :title="t('customType')"> <demo-block :title="t('customType')">
<van-field <van-cell-group inset>
v-model="text" <van-field
:label="t('text')" v-model="text"
:placeholder="t('textPlaceholder')" :label="t('text')"
/> :placeholder="t('textPlaceholder')"
<van-field />
v-model="phone" <van-field
type="tel" v-model="phone"
:label="t('phone')" type="tel"
:placeholder="t('phonePlaceholder')" :label="t('phone')"
/> :placeholder="t('phonePlaceholder')"
<van-field />
v-model="digit" <van-field
type="digit" v-model="digit"
:label="t('digit')" type="digit"
:placeholder="t('digitPlaceholder')" :label="t('digit')"
/> :placeholder="t('digitPlaceholder')"
<van-field />
v-model="number" <van-field
type="number" v-model="number"
:label="t('number')" type="number"
:placeholder="t('numberPlaceholder')" :label="t('number')"
/> :placeholder="t('numberPlaceholder')"
<van-field />
v-model="password" <van-field
type="password" v-model="password"
:label="t('password')" type="password"
:placeholder="t('passwordPlaceholder')" :label="t('password')"
/> :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>

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

@ -1,19 +1,21 @@
<template> <template>
<demo-block :title="t('errorInfo')"> <demo-block :title="t('errorInfo')">
<van-field <van-cell-group inset>
v-model="username" <van-field
error v-model="username"
required error
:label="t('username')" required
:placeholder="t('usernamePlaceholder')" :label="t('username')"
/> :placeholder="t('usernamePlaceholder')"
<van-field />
v-model="phone" <van-field
required v-model="phone"
:label="t('phone')" required
:placeholder="t('phonePlaceholder')" :label="t('phone')"
:error-message="t('phoneError')" :placeholder="t('phonePlaceholder')"
/> :error-message="t('phoneError')"
/>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

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

@ -1,18 +1,20 @@
<template> <template>
<demo-block v-if="!isWeapp" :title="t('formatValue')"> <demo-block v-if="!isWeapp" :title="t('formatValue')">
<van-field <van-cell-group inset>
v-model="value1" <van-field
:label="t('text')" v-model="value1"
:formatter="formatter" :label="t('text')"
:placeholder="t('formatOnChange')" :formatter="formatter"
/> :placeholder="t('formatOnChange')"
<van-field />
v-model="value2" <van-field
:label="t('text')" v-model="value2"
:formatter="formatter" :label="t('text')"
format-trigger="onBlur" :formatter="formatter"
:placeholder="t('formatOnBlur')" format-trigger="onBlur"
/> :placeholder="t('formatOnBlur')"
/>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

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

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

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

@ -1,18 +1,20 @@
<template> <template>
<demo-block :title="t('insertButton')"> <demo-block :title="t('insertButton')">
<van-field <van-cell-group inset>
v-model="sms" <van-field
center v-model="sms"
clearable center
:label="t('sms')" clearable
:placeholder="t('smsPlaceholder')" :label="t('sms')"
> :placeholder="t('smsPlaceholder')"
<template #button> >
<van-button size="small" type="primary"> <template #button>
{{ t('sendSMS') }} <van-button size="small" type="primary">
</van-button> {{ t('sendSMS') }}
</template> </van-button>
</van-field> </template>
</van-field>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

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

@ -1,19 +1,21 @@
<template> <template>
<demo-block :title="t('showIcon')"> <demo-block :title="t('showIcon')">
<van-field <van-cell-group inset>
v-model="icon1" <van-field
:label="t('text')" v-model="icon1"
left-icon="smile-o" :label="t('text')"
right-icon="warning-o" left-icon="smile-o"
:placeholder="t('showIcon')" right-icon="warning-o"
/> :placeholder="t('showIcon')"
<van-field />
v-model="icon2" <van-field
clearable v-model="icon2"
:label="t('text')" clearable
left-icon="music-o" :label="t('text')"
:placeholder="t('showClearIcon')" left-icon="music-o"
/> :placeholder="t('showClearIcon')"
/>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

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

@ -1,15 +1,17 @@
<template> <template>
<demo-block v-if="!isWeapp" :title="t('showWordLimit')"> <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
<van-field <van-cell-group inset>
v-model="value" <van-field
autosize v-model="value"
show-word-limit autosize
rows="2" show-word-limit
type="textarea" rows="2"
maxlength="50" type="textarea"
:label="t('message')" maxlength="50"
:placeholder="t('placeholder')" :label="t('message')"
/> :placeholder="t('placeholder')"
/>
</van-cell-group>
</demo-block> </demo-block>
</template> </template>

608
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,307 +21,325 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-cell van-field"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell__title van-field__label"> <div class="van-cell van-field">
<span> <div class="van-cell__title van-field__label">
Text <span>
</span> Text
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Text"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Phone
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
class="van-field__control"
placeholder="Phone"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Digit
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
inputmode="numeric"
class="van-field__control"
placeholder="Digit"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Number
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
inputmode="decimal"
class="van-field__control"
placeholder="Number"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Password
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="password"
class="van-field__control"
placeholder="Password"
>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
readonly
>
</div>
</div>
</div>
<div class="van-cell van-field van-field--disabled">
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
disabled
>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-field">
<div class="van-field__left-icon">
<i class="van-badge__wrapper van-icon van-icon-smile-o">
</i>
</div>
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Show Icon"
>
<div class="van-field__right-icon">
<i class="van-badge__wrapper van-icon van-icon-warning-o">
</i>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-field__left-icon">
<i class="van-badge__wrapper van-icon van-icon-music-o">
</i>
</div>
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Show Clear Icon"
>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-cell--required van-field van-field--error">
<div class="van-cell__title van-field__label">
<span>
Username
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Username"
>
</div>
</div>
</div>
<div class="van-cell van-cell--required van-field">
<div class="van-cell__title van-field__label">
<span>
Phone
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Phone"
>
</div>
<div class="van-field__error-message">
Invalid phone
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-cell--center van-field">
<div class="van-cell__title van-field__label">
<span>
SMS
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="SMS"
>
<div class="van-field__button">
<button type="button"
class="van-button van-button--primary van-button--small"
>
<div class="van-button__content">
<span class="van-button__text">
Send SMS
</span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Format On Change"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Format On Blur"
>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<textarea rows="1"
class="van-field__control"
placeholder="Message"
style="height: auto;"
>
</textarea>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Message
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="2"
class="van-field__control"
placeholder="Message"
style="height: auto;"
>
</textarea>
</div>
<div class="van-field__word-limit">
<span class="van-field__word-num">
0
</span> </span>
/50 </div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Text"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Phone
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
class="van-field__control"
placeholder="Phone"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Digit
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="tel"
inputmode="numeric"
class="van-field__control"
placeholder="Digit"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Number
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
inputmode="decimal"
class="van-field__control"
placeholder="Number"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Password
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="password"
class="van-field__control"
placeholder="Password"
>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-cell van-field"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell__title van-field__label"> <div class="van-cell van-field">
<span> <div class="van-cell__title van-field__label">
Text <span>
</span> Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
readonly
>
</div>
</div>
</div> </div>
<div class="van-cell__value van-field__value"> <div class="van-cell van-field van-field--disabled">
<div class="van-field__body"> <div class="van-cell__title van-field__label">
<input type="text" <span>
class="van-field__control van-field__control--right" Text
placeholder="Input Align Right" </span>
> </div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
disabled
>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-field__left-icon">
<i class="van-badge__wrapper van-icon van-icon-smile-o">
</i>
</div>
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Show Icon"
>
<div class="van-field__right-icon">
<i class="van-badge__wrapper van-icon van-icon-warning-o">
</i>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-field__left-icon">
<i class="van-badge__wrapper van-icon van-icon-music-o">
</i>
</div>
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Show Clear Icon"
>
</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__title van-field__label">
<span>
Username
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Username"
>
</div>
</div>
</div>
<div class="van-cell van-cell--required van-field">
<div class="van-cell__title van-field__label">
<span>
Phone
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Phone"
>
</div>
<div class="van-field__error-message">
Invalid phone
</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__title van-field__label">
<span>
SMS
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="SMS"
>
<div class="van-field__button">
<button type="button"
class="van-button van-button--primary van-button--small"
>
<div class="van-button__content">
<span class="van-button__text">
Send SMS
</span>
</div>
</button>
</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__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Format On Change"
>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control"
placeholder="Format On Blur"
>
</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__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<textarea rows="1"
class="van-field__control"
placeholder="Message"
style="height: auto;"
>
</textarea>
</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__title van-field__label">
<span>
Message
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<textarea rows="2"
class="van-field__control"
placeholder="Message"
style="height: auto;"
>
</textarea>
</div>
<div class="van-field__word-limit">
<span class="van-field__word-num">
0
</span>
/50
</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__title van-field__label">
<span>
Text
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
class="van-field__control van-field__control--right"
placeholder="Input Align Right"
>
</div>
</div> </div>
</div> </div>
</div> </div>

85
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,21 +24,23 @@ app.use(Field);
```html ```html
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field <van-cell-group inset>
v-model="state.username" <van-field
name="Username" v-model="state.username"
label="Username" name="Username"
placeholder="Username" label="Username"
:rules="[{ required: true, message: 'Username is required' }]" placeholder="Username"
/> :rules="[{ required: true, message: 'Username is required' }]"
<van-field />
v-model="state.password" <van-field
type="password" v-model="state.password"
name="Password" type="password"
label="Password" name="Password"
placeholder="Password" label="Password"
:rules="[{ required: true, message: 'Password is required' }]" placeholder="Password"
/> :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,30 +74,32 @@ export default {
```html ```html
<van-form @failed="onFailed"> <van-form @failed="onFailed">
<van-field <van-cell-group inset>
v-model="state.value1" <van-field
name="pattern" v-model="state.value1"
placeholder="Use pattern" name="pattern"
:rules="[{ pattern, message: 'Error message' }]" placeholder="Use pattern"
/> :rules="[{ pattern, message: 'Error message' }]"
<van-field />
v-model="state.value2" <van-field
name="validator" v-model="state.value2"
placeholder="Use validator" name="validator"
:rules="[{ validator, message: 'Error message' }]" placeholder="Use validator"
/> :rules="[{ validator, message: 'Error message' }]"
<van-field />
v-model="state.value3" <van-field
name="validatorMessage" v-model="state.value3"
placeholder="Use validator to return message" name="validatorMessage"
:rules="[{ validator: validatorMessage }]" placeholder="Use validator to return message"
/> :rules="[{ validator: validatorMessage }]"
<van-field />
v-model="state.value4" <van-field
name="asyncValidator" v-model="state.value4"
placeholder="Use async validator" name="asyncValidator"
:rules="[{ validator: asyncValidator, message: 'Error message' }]" placeholder="Use async validator"
/> :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

93
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,21 +26,23 @@ app.use(Field);
```html ```html
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field <van-cell-group inset>
v-model="state.username" <van-field
name="用户名" v-model="state.username"
label="用户名" name="用户名"
placeholder="用户名" label="用户名"
:rules="[{ required: true, message: '请填写用户名' }]" placeholder="用户名"
/> :rules="[{ required: true, message: '请填写用户名' }]"
<van-field />
v-model="state.password" <van-field
type="password" v-model="state.password"
name="密码" type="password"
label="密码" name="密码"
placeholder="密码" label="密码"
:rules="[{ required: true, message: '请填写密码' }]" placeholder="密码"
/> :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,34 +78,36 @@ export default {
```html ```html
<van-form @failed="onFailed"> <van-form @failed="onFailed">
<!-- 通过 pattern 进行正则校验 --> <van-cell-group inset>
<van-field <!-- 通过 pattern 进行正则校验 -->
v-model="state.value1" <van-field
name="pattern" v-model="state.value1"
placeholder="正则校验" name="pattern"
:rules="[{ pattern, message: '请输入正确内容' }]" placeholder="正则校验"
/> :rules="[{ pattern, message: '请输入正确内容' }]"
<!-- 通过 validator 进行函数校验 --> />
<van-field <!-- 通过 validator 进行函数校验 -->
v-model="state.value2" <van-field
name="validator" v-model="state.value2"
placeholder="函数校验" name="validator"
:rules="[{ validator, message: '请输入正确内容' }]" placeholder="函数校验"
/> :rules="[{ validator, message: '请输入正确内容' }]"
<!-- 通过 validator 返回错误提示 --> />
<van-field <!-- 通过 validator 返回错误提示 -->
v-model="state.value3" <van-field
name="validatorMessage" v-model="state.value3"
placeholder="校验函数返回错误提示" name="validatorMessage"
:rules="[{ validator: validatorMessage }]" placeholder="校验函数返回错误提示"
/> :rules="[{ validator: validatorMessage }]"
<!-- 通过 validator 进行异步函数校验 --> />
<van-field <!-- 通过 validator 进行异步函数校验 -->
v-model="state.value4" <van-field
name="asyncValidator" v-model="state.value4"
placeholder="异步函数校验" name="asyncValidator"
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" placeholder="异步函数校验"
/> :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">
提交 提交

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

@ -1,21 +1,24 @@
<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-field <van-cell-group inset>
v-model="username" <van-field
name="username" v-model="username"
:label="t('username')" name="username"
:rules="[{ required: true, message: t('requireUsername') }]" :label="t('username')"
:placeholder="t('username')" :rules="[{ required: true, message: t('requireUsername') }]"
/> :placeholder="t('username')"
<van-field />
v-model="password" <van-field
type="password" v-model="password"
name="password" type="password"
:label="t('password')" name="password"
:rules="[{ required: true, message: t('requirePassword') }]" :label="t('password')"
:placeholder="t('password')" :rules="[{ required: true, message: t('requirePassword') }]"
/> :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') }}

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

@ -1,68 +1,70 @@
<template> <template>
<demo-block :title="t('fieldType')"> <demo-block :title="t('fieldType')">
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field name="switch" :label="t('switch')"> <van-cell-group inset>
<template #input> <van-field name="switch" :label="t('switch')">
<van-switch v-model="switchChecked" size="20" /> <template #input>
</template> <van-switch v-model="switchChecked" size="20" />
</van-field> </template>
</van-field>
<van-field name="checkbox" :label="t('checkbox')"> <van-field name="checkbox" :label="t('checkbox')">
<template #input> <template #input>
<van-checkbox v-model="checkbox" shape="square" /> <van-checkbox v-model="checkbox" shape="square" />
</template> </template>
</van-field> </van-field>
<van-field name="checkboxGroup" :label="t('checkboxGroup')"> <van-field name="checkboxGroup" :label="t('checkboxGroup')">
<template #input> <template #input>
<van-checkbox-group v-model="checkboxGroup" direction="horizontal"> <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
<van-checkbox name="1" shape="square"> <van-checkbox name="1" shape="square">
{{ t('checkbox') }} 1 {{ t('checkbox') }} 1
</van-checkbox> </van-checkbox>
<van-checkbox name="2" shape="square"> <van-checkbox name="2" shape="square">
{{ t('checkbox') }} 2 {{ t('checkbox') }} 2
</van-checkbox> </van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</template> </template>
</van-field> </van-field>
<van-field name="radio" :label="t('radio')"> <van-field name="radio" :label="t('radio')">
<template #input> <template #input>
<van-radio-group v-model="radio" direction="horizontal"> <van-radio-group v-model="radio" direction="horizontal">
<van-radio name="1">{{ t('radio') }} 1</van-radio> <van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio> <van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group> </van-radio-group>
</template> </template>
</van-field> </van-field>
<van-field name="stepper" :label="t('stepper')"> <van-field name="stepper" :label="t('stepper')">
<template #input> <template #input>
<van-stepper v-model="stepper" /> <van-stepper v-model="stepper" />
</template> </template>
</van-field> </van-field>
<van-field name="rate" :label="t('rate')"> <van-field name="rate" :label="t('rate')">
<template #input> <template #input>
<van-rate v-model="rate" /> <van-rate v-model="rate" />
</template> </template>
</van-field> </van-field>
<van-field name="slider" :label="t('slider')"> <van-field name="slider" :label="t('slider')">
<template #input> <template #input>
<van-slider v-model="slider" /> <van-slider v-model="slider" />
</template> </template>
</van-field> </van-field>
<van-field name="uploader" :label="t('uploader')"> <van-field name="uploader" :label="t('uploader')">
<template #input> <template #input>
<van-uploader v-model="uploader" max-count="2" /> <van-uploader v-model="uploader" max-count="2" />
</template> </template>
</van-field> </van-field>
<field-type-picker /> <field-type-picker />
<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">

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

@ -1,34 +1,36 @@
<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-field <van-cell-group inset>
v-model="value1" <van-field
name="pattern" v-model="value1"
:label="t('label')" name="pattern"
:rules="[{ pattern, message: t('message') }]" :label="t('label')"
:placeholder="t('pattern')" :rules="[{ pattern, message: t('message') }]"
/> :placeholder="t('pattern')"
<van-field />
v-model="value2" <van-field
name="validator" v-model="value2"
:label="t('label')" name="validator"
:rules="[{ validator, message: t('message') }]" :label="t('label')"
:placeholder="t('validator')" :rules="[{ validator, message: t('message') }]"
/> :placeholder="t('validator')"
<van-field />
v-model="value3" <van-field
name="validatorMessage" v-model="value3"
:label="t('label')" name="validatorMessage"
:rules="[{ validator: validatorMessage }]" :label="t('label')"
:placeholder="t('validatorMessage')" :rules="[{ validator: validatorMessage }]"
/> :placeholder="t('validatorMessage')"
<van-field />
v-model="value4" <van-field
name="asyncValidator" v-model="value4"
:label="t('label')" name="asyncValidator"
:rules="[{ validator: asyncValidator, message: t('message') }]" :label="t('label')"
:placeholder="t('asyncValidator')" :rules="[{ validator: asyncValidator, message: t('message') }]"
/> :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') }}

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

@ -3,35 +3,37 @@
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 van-field"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell__title van-field__label"> <div class="van-cell van-field">
<span> <div class="van-cell__title van-field__label">
Username <span>
</span> Username
</div> </span>
<div class="van-cell__value van-field__value"> </div>
<div class="van-field__body"> <div class="van-cell__value van-field__value">
<input type="text" <div class="van-field__body">
name="username" <input type="text"
class="van-field__control" name="username"
placeholder="Username" class="van-field__control"
> placeholder="Username"
>
</div>
</div> </div>
</div> </div>
</div> <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> Password
Password </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="password"
<input type="password" name="password"
name="password" class="van-field__control"
class="van-field__control" placeholder="Password"
placeholder="Password" >
> </div>
</div> </div>
</div> </div>
</div> </div>
@ -50,67 +52,69 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<form class="van-form"> <form class="van-form">
<div class="van-cell van-field"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell__title van-field__label"> <div class="van-cell van-field">
<span> <div class="van-cell__title van-field__label">
Label <span>
</span> Label
</div> </span>
<div class="van-cell__value van-field__value"> </div>
<div class="van-field__body"> <div class="van-cell__value van-field__value">
<input type="text" <div class="van-field__body">
name="pattern" <input type="text"
class="van-field__control" name="pattern"
placeholder="Use pattern" class="van-field__control"
> placeholder="Use pattern"
>
</div>
</div> </div>
</div> </div>
</div> <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> Label
Label </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="validator"
name="validator" class="van-field__control"
class="van-field__control" placeholder="Use validator"
placeholder="Use validator" >
> </div>
</div> </div>
</div> </div>
</div> <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> Label
Label </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="validatorMessage"
name="validatorMessage" class="van-field__control"
class="van-field__control" placeholder="Use validator to return message"
placeholder="Use validator to return message" >
> </div>
</div> </div>
</div> </div>
</div> <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> Label
Label </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="asyncValidator"
name="asyncValidator" class="van-field__control"
class="van-field__control" placeholder="Use async validator"
placeholder="Use async validator" >
> </div>
</div> </div>
</div> </div>
</div> </div>
@ -129,62 +133,39 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<form class="van-form"> <form class="van-form">
<div class="van-cell van-field"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell__title van-field__label"> <div class="van-cell van-field">
<span> <div class="van-cell__title van-field__label">
Switch <span>
</span> Switch
</div> </span>
<div class="van-cell__value van-field__value"> </div>
<div class="van-field__body"> <div class="van-cell__value van-field__value">
<div class="van-field__control van-field__control--custom"> <div class="van-field__body">
<div role="switch" <div class="van-field__control van-field__control--custom">
class="van-switch" <div role="switch"
style="font-size: 20px;" class="van-switch"
aria-checked="false" style="font-size: 20px;"
> aria-checked="false"
<div class="van-switch__node"> >
<div class="van-switch__node">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <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> Checkbox
Checkbox </span>
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="checkbox"
class="van-checkbox"
tabindex="0"
aria-checked="false"
>
<div class="van-checkbox__icon van-checkbox__icon--square">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
</div>
</div>
</div> </div>
</div> <div class="van-cell__value van-field__value">
</div> <div class="van-field__body">
<div class="van-cell van-field"> <div class="van-field__control van-field__control--custom">
<div class="van-cell__title van-field__label">
<span>
Checkbox Group
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-checkbox-group van-checkbox-group--horizontal">
<div role="checkbox" <div role="checkbox"
class="van-checkbox van-checkbox--horizontal" class="van-checkbox"
tabindex="0" tabindex="0"
aria-checked="false" aria-checked="false"
> >
@ -192,192 +173,217 @@ exports[`should render demo and match snapshot 1`] = `
<i class="van-badge__wrapper van-icon van-icon-success"> <i class="van-badge__wrapper van-icon van-icon-success">
</i> </i>
</div> </div>
<span class="van-checkbox__label">
Checkbox 1
</span>
</div>
<div role="checkbox"
class="van-checkbox van-checkbox--horizontal"
tabindex="0"
aria-checked="false"
>
<div class="van-checkbox__icon van-checkbox__icon--square">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-checkbox__label">
Checkbox 2
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <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> Checkbox Group
Radio </span>
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-radio-group van-radio-group--horizontal"
role="radiogroup"
>
<div role="radio"
class="van-radio van-radio--horizontal"
tabindex="0"
aria-checked="true"
>
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-radio__label">
Radio 1
</span>
</div>
<div role="radio"
class="van-radio van-radio--horizontal"
tabindex="0"
aria-checked="false"
>
<div class="van-radio__icon van-radio__icon--round">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-radio__label">
Radio 2
</span>
</div>
</div>
</div>
</div> </div>
</div> <div class="van-cell__value van-field__value">
</div> <div class="van-field__body">
<div class="van-cell van-field"> <div class="van-field__control van-field__control--custom">
<div class="van-cell__title van-field__label"> <div class="van-checkbox-group van-checkbox-group--horizontal">
<span> <div role="checkbox"
Stepper class="van-checkbox van-checkbox--horizontal"
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-stepper">
<button type="button"
class="van-stepper__minus van-stepper__minus--disabled"
>
</button>
<input type="text"
role="spinbutton"
class="van-stepper__input"
inputmode="decimal"
aria-valuemax="Infinity"
aria-valuemin="1"
aria-valuenow="1"
>
<button type="button"
class="van-stepper__plus"
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Rate
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="radiogroup"
class="van-rate"
tabindex="0"
>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Slider
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-slider">
<div class="van-slider__bar"
style="width: 50%; left: 0%;"
>
<div role="slider"
class="van-slider__button-wrapper"
tabindex="0" tabindex="0"
aria-valuemin="0" aria-checked="false"
aria-valuenow="50"
aria-valuemax="100"
aria-orientation="horizontal"
> >
<div class="van-slider__button"> <div class="van-checkbox__icon van-checkbox__icon--square">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-checkbox__label">
Checkbox 1
</span>
</div>
<div role="checkbox"
class="van-checkbox van-checkbox--horizontal"
tabindex="0"
aria-checked="false"
>
<div class="van-checkbox__icon van-checkbox__icon--square">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-checkbox__label">
Checkbox 2
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Radio
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-radio-group van-radio-group--horizontal"
role="radiogroup"
>
<div role="radio"
class="van-radio van-radio--horizontal"
tabindex="0"
aria-checked="true"
>
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-radio__label">
Radio 1
</span>
</div>
<div role="radio"
class="van-radio van-radio--horizontal"
tabindex="0"
aria-checked="false"
>
<div class="van-radio__icon van-radio__icon--round">
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-radio__label">
Radio 2
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Stepper
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-stepper">
<button type="button"
class="van-stepper__minus van-stepper__minus--disabled"
>
</button>
<input type="text"
role="spinbutton"
class="van-stepper__input"
inputmode="decimal"
aria-valuemax="Infinity"
aria-valuemin="1"
aria-valuenow="1"
>
<button type="button"
class="van-stepper__plus"
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Rate
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="radiogroup"
class="van-rate"
tabindex="0"
>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Slider
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-slider">
<div class="van-slider__bar"
style="width: 50%; left: 0%;"
>
<div role="slider"
class="van-slider__button-wrapper"
tabindex="0"
aria-valuemin="0"
aria-valuenow="50"
aria-valuemax="100"
aria-orientation="horizontal"
>
<div class="van-slider__button">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -385,125 +391,125 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> <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> Uploader
Uploader </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <div class="van-field__control van-field__control--custom">
<div class="van-field__control van-field__control--custom"> <div class="van-uploader">
<div class="van-uploader"> <div class="van-uploader__wrapper">
<div class="van-uploader__wrapper"> <div class="van-uploader__preview">
<div class="van-uploader__preview"> <div class="van-image van-uploader__preview-image">
<div class="van-image van-uploader__preview-image"> <img src="https://img.yzcdn.cn/vant/leaf.jpg"
<img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img"
class="van-image__img" style="object-fit: cover;"
style="object-fit: cover;" >
> <div class="van-image__loading">
<div class="van-image__loading"> <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon"> </i>
</div>
</div>
<div class="van-uploader__preview-delete">
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i> </i>
</div> </div>
</div> </div>
<div class="van-uploader__preview-delete"> <div class="van-uploader__upload">
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon"> <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
</i> </i>
<input type="file"
class="van-uploader__input"
accept="image/*"
>
</div> </div>
</div> </div>
<div class="van-uploader__upload">
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
</i>
<input type="file"
class="van-uploader__input"
accept="image/*"
>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-cell--clickable van-field"
<div class="van-cell van-cell--clickable van-field" role="button"
role="button" tabindex="0"
tabindex="0" >
> <div class="van-cell__title van-field__label">
<div class="van-cell__title van-field__label"> <span>
<span> Picker
Picker </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="picker"
name="picker" class="van-field__control"
class="van-field__control" readonly
readonly placeholder="Select city"
placeholder="Select city" >
> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-cell--clickable van-field"
<div class="van-cell van-cell--clickable van-field" role="button"
role="button" tabindex="0"
tabindex="0" >
> <div class="van-cell__title van-field__label">
<div class="van-cell__title van-field__label"> <span>
<span> Datetime Picker
Datetime Picker </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="datetimePicker"
name="datetimePicker" class="van-field__control"
class="van-field__control" readonly
readonly placeholder="Select time"
placeholder="Select time" >
> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-cell--clickable van-field"
<div class="van-cell van-cell--clickable van-field" role="button"
role="button" tabindex="0"
tabindex="0" >
> <div class="van-cell__title van-field__label">
<div class="van-cell__title van-field__label"> <span>
<span> Area Picker
Area Picker </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="area"
name="area" class="van-field__control"
class="van-field__control" readonly
readonly placeholder="Select area"
placeholder="Select area" >
> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-cell--clickable van-field"
<div class="van-cell van-cell--clickable van-field" role="button"
role="button" tabindex="0"
tabindex="0" >
> <div class="van-cell__title van-field__label">
<div class="van-cell__title van-field__label"> <span>
<span> Calendar
Calendar </span>
</span> </div>
</div> <div class="van-cell__value van-field__value">
<div class="van-cell__value van-field__value"> <div class="van-field__body">
<div class="van-field__body"> <input type="text"
<input type="text" name="calendar"
name="calendar" class="van-field__control"
class="van-field__control" readonly
readonly placeholder="Select date"
placeholder="Select date" >
> </div>
</div> </div>
</div> </div>
</div> </div>