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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
exports[`should render demo and match snapshot 1`] = `
<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__title van-field__label">
<span>
@ -21,307 +21,325 @@ exports[`should render demo and match snapshot 1`] = `
</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="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
<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>
/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 class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Text
</span>
<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"
readonly
>
</div>
</div>
</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 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>
<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>

85
src/form/README.md
View File

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

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

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

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

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

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

@ -1,68 +1,70 @@
<template>
<demo-block :title="t('fieldType')">
<van-form @submit="onSubmit">
<van-field name="switch" :label="t('switch')">
<template #input>
<van-switch v-model="switchChecked" size="20" />
</template>
</van-field>
<van-cell-group inset>
<van-field name="switch" :label="t('switch')">
<template #input>
<van-switch v-model="switchChecked" size="20" />
</template>
</van-field>
<van-field name="checkbox" :label="t('checkbox')">
<template #input>
<van-checkbox v-model="checkbox" shape="square" />
</template>
</van-field>
<van-field name="checkbox" :label="t('checkbox')">
<template #input>
<van-checkbox v-model="checkbox" shape="square" />
</template>
</van-field>
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
<template #input>
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
<van-checkbox name="1" shape="square">
{{ t('checkbox') }} 1
</van-checkbox>
<van-checkbox name="2" shape="square">
{{ t('checkbox') }} 2
</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
<template #input>
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
<van-checkbox name="1" shape="square">
{{ t('checkbox') }} 1
</van-checkbox>
<van-checkbox name="2" shape="square">
{{ t('checkbox') }} 2
</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
<van-field name="radio" :label="t('radio')">
<template #input>
<van-radio-group v-model="radio" direction="horizontal">
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field name="radio" :label="t('radio')">
<template #input>
<van-radio-group v-model="radio" direction="horizontal">
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field name="stepper" :label="t('stepper')">
<template #input>
<van-stepper v-model="stepper" />
</template>
</van-field>
<van-field name="stepper" :label="t('stepper')">
<template #input>
<van-stepper v-model="stepper" />
</template>
</van-field>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="slider" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="slider" />
</template>
</van-field>
<van-field name="uploader" :label="t('uploader')">
<template #input>
<van-uploader v-model="uploader" max-count="2" />
</template>
</van-field>
<van-field name="uploader" :label="t('uploader')">
<template #input>
<van-uploader v-model="uploader" max-count="2" />
</template>
</van-field>
<field-type-picker />
<field-type-datetime-picker />
<field-type-area />
<field-type-calendar />
<field-type-picker />
<field-type-datetime-picker />
<field-type-area />
<field-type-calendar />
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit">

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

@ -1,34 +1,36 @@
<template>
<demo-block :title="t('title')">
<van-form @sumbit="onSubmit" @failed="onFailed">
<van-field
v-model="value1"
name="pattern"
:label="t('label')"
:rules="[{ pattern, message: t('message') }]"
:placeholder="t('pattern')"
/>
<van-field
v-model="value2"
name="validator"
:label="t('label')"
:rules="[{ validator, message: t('message') }]"
:placeholder="t('validator')"
/>
<van-field
v-model="value3"
name="validatorMessage"
:label="t('label')"
:rules="[{ validator: validatorMessage }]"
:placeholder="t('validatorMessage')"
/>
<van-field
v-model="value4"
name="asyncValidator"
:label="t('label')"
:rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')"
/>
<van-cell-group inset>
<van-field
v-model="value1"
name="pattern"
:label="t('label')"
:rules="[{ pattern, message: t('message') }]"
:placeholder="t('pattern')"
/>
<van-field
v-model="value2"
name="validator"
:label="t('label')"
:rules="[{ validator, message: t('message') }]"
:placeholder="t('validator')"
/>
<van-field
v-model="value3"
name="validatorMessage"
:label="t('label')"
:rules="[{ validator: validatorMessage }]"
:placeholder="t('validatorMessage')"
/>
<van-field
v-model="value4"
name="asyncValidator"
:label="t('label')"
:rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')"
/>
</van-cell-group>
<div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="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`] = `
<div>
<form class="van-form">
<div class="van-cell van-field">
<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"
name="username"
class="van-field__control"
placeholder="Username"
>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<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"
name="username"
class="van-field__control"
placeholder="Username"
>
</div>
</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"
name="password"
class="van-field__control"
placeholder="Password"
>
<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"
name="password"
class="van-field__control"
placeholder="Password"
>
</div>
</div>
</div>
</div>
@ -50,67 +52,69 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div>
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="pattern"
class="van-field__control"
placeholder="Use pattern"
>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="pattern"
class="van-field__control"
placeholder="Use pattern"
>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="validator"
class="van-field__control"
placeholder="Use validator"
>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="validator"
class="van-field__control"
placeholder="Use validator"
>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="validatorMessage"
class="van-field__control"
placeholder="Use validator to return message"
>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="validatorMessage"
class="van-field__control"
placeholder="Use validator to return message"
>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="asyncValidator"
class="van-field__control"
placeholder="Use async validator"
>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Label
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="asyncValidator"
class="van-field__control"
placeholder="Use async validator"
>
</div>
</div>
</div>
</div>
@ -129,62 +133,39 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div>
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Switch
</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="switch"
class="van-switch"
style="font-size: 20px;"
aria-checked="false"
>
<div class="van-switch__node">
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Switch
</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="switch"
class="van-switch"
style="font-size: 20px;"
aria-checked="false"
>
<div class="van-switch__node">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Checkbox
</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 class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Checkbox
</span>
</div>
</div>
</div>
<div class="van-cell van-field">
<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 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 van-checkbox--horizontal"
class="van-checkbox"
tabindex="0"
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>
</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 class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Checkbox Group
</span>
</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"
<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"
class="van-checkbox van-checkbox--horizontal"
tabindex="0"
aria-valuemin="0"
aria-valuenow="50"
aria-valuemax="100"
aria-orientation="horizontal"
aria-checked="false"
>
<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>
@ -385,125 +391,125 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Uploader
</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-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image">
<img src="https://img.yzcdn.cn/vant/leaf.jpg"
class="van-image__img"
style="object-fit: cover;"
>
<div class="van-image__loading">
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<span>
Uploader
</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-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image">
<img src="https://img.yzcdn.cn/vant/leaf.jpg"
class="van-image__img"
style="object-fit: cover;"
>
<div class="van-image__loading">
<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>
</div>
</div>
<div class="van-uploader__preview-delete">
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
<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 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 class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Picker
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="picker"
class="van-field__control"
readonly
placeholder="Select city"
>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Picker
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="picker"
class="van-field__control"
readonly
placeholder="Select city"
>
</div>
</div>
</div>
</div>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Datetime Picker
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="datetimePicker"
class="van-field__control"
readonly
placeholder="Select time"
>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Datetime Picker
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="datetimePicker"
class="van-field__control"
readonly
placeholder="Select time"
>
</div>
</div>
</div>
</div>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Area Picker
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="area"
class="van-field__control"
readonly
placeholder="Select area"
>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Area Picker
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="area"
class="van-field__control"
readonly
placeholder="Select area"
>
</div>
</div>
</div>
</div>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Calendar
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="calendar"
class="van-field__control"
readonly
placeholder="Select date"
>
<div class="van-cell van-cell--clickable van-field"
role="button"
tabindex="0"
>
<div class="van-cell__title van-field__label">
<span>
Calendar
</span>
</div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<input type="text"
name="calendar"
class="van-field__control"
readonly
placeholder="Select date"
>
</div>
</div>
</div>
</div>