mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Form): updat demo, using inset CellGroup (#8938)
This commit is contained in:
neverland
GitHub
parent
68971c0773
commit
5acf7e88bc
@ -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-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-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,6 +159,7 @@ Use button slot to insert button.
|
||||
Use `formatter` prop to format the input value.
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
label="Text"
|
||||
@ -167,6 +173,7 @@ Use `formatter` prop to format the input value.
|
||||
format-trigger="onBlur"
|
||||
placeholder="Format On Blur"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -193,6 +200,7 @@ export default {
|
||||
Textarea Field can be auto resize when has `autosize` prop.
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="Message"
|
||||
@ -201,11 +209,13 @@ Textarea Field can be auto resize when has `autosize` prop.
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Show Word Limit
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="message"
|
||||
rows="2"
|
||||
@ -216,6 +226,7 @@ Textarea Field can be auto resize when has `autosize` prop.
|
||||
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-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_ |
|
||||
|
||||
@ -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,6 +46,7 @@ export default {
|
||||
根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<!-- 输入任意文本 -->
|
||||
<van-field v-model="state.text" label="文本" />
|
||||
<!-- 输入手机号，调起手机号键盘 -->
|
||||
@ -55,6 +57,7 @@ export default {
|
||||
<van-field v-model="state.number" type="number" label="数字" />
|
||||
<!-- 输入密码 -->
|
||||
<van-field v-model="state.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,6 +155,7 @@ export default {
|
||||
通过 button 插槽可以在输入框尾部插入按钮。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="sms"
|
||||
center
|
||||
@ -163,6 +167,7 @@ export default {
|
||||
<van-button size="small" type="primary">发送验证码</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 格式化输入内容
|
||||
@ -170,6 +175,7 @@ export default {
|
||||
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
label="文本"
|
||||
@ -183,6 +189,7 @@ export default {
|
||||
format-trigger="onBlur"
|
||||
placeholder="在失焦时执行格式化"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -210,6 +217,7 @@ export default {
|
||||
对于 textarea，可以通过 `autosize` 属性设置高度自适应。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="message"
|
||||
rows="1"
|
||||
@ -218,6 +226,7 @@ export default {
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 显示字数统计
|
||||
@ -225,6 +234,7 @@ export default {
|
||||
设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="message"
|
||||
rows="2"
|
||||
@ -235,6 +245,7 @@ export default {
|
||||
placeholder="请输入留言"
|
||||
show-word-limit
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 输入框内容对齐
|
||||
@ -242,12 +253,14 @@ export default {
|
||||
通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value"
|
||||
label="文本"
|
||||
placeholder="输入框内容右对齐"
|
||||
input-align="right"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block :title="t('autosize')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value"
|
||||
autosize
|
||||
@ -8,6 +9,7 @@
|
||||
:label="t('message')"
|
||||
:placeholder="t('placeholder')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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')"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block :title="t('customType')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="text"
|
||||
:label="t('text')"
|
||||
@ -29,6 +30,7 @@
|
||||
:label="t('password')"
|
||||
:placeholder="t('passwordPlaceholder')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block :title="t('errorInfo')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="username"
|
||||
error
|
||||
@ -14,6 +15,7 @@
|
||||
:placeholder="t('phonePlaceholder')"
|
||||
:error-message="t('phoneError')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block v-if="!isWeapp" :title="t('formatValue')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value1"
|
||||
:label="t('text')"
|
||||
@ -13,6 +14,7 @@
|
||||
format-trigger="onBlur"
|
||||
:placeholder="t('formatOnBlur')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<demo-block :title="t('inputAlign')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="t('text')"
|
||||
:placeholder="t('alignPlaceHolder')"
|
||||
input-align="right"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block :title="t('insertButton')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="sms"
|
||||
center
|
||||
@ -13,6 +14,7 @@
|
||||
</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block :title="t('showIcon')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="icon1"
|
||||
:label="t('text')"
|
||||
@ -14,6 +15,7 @@
|
||||
left-icon="music-o"
|
||||
:placeholder="t('showClearIcon')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<demo-block v-if="!isWeapp" :title="t('showWordLimit')">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value"
|
||||
autosize
|
||||
@ -10,6 +11,7 @@
|
||||
:label="t('message')"
|
||||
:placeholder="t('placeholder')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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,6 +21,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -99,7 +100,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -131,7 +134,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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">
|
||||
@ -175,7 +180,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -210,7 +217,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -238,7 +247,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -270,7 +281,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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">
|
||||
@ -284,7 +297,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -309,7 +324,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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>
|
||||
@ -326,4 +343,5 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -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,6 +24,7 @@ app.use(Field);
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="Username"
|
||||
@ -38,6 +40,7 @@ app.use(Field);
|
||||
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,6 +74,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-form @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
@ -95,6 +99,7 @@ export default {
|
||||
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
|
||||
|
||||
@ -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,6 +26,7 @@ app.use(Field);
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="用户名"
|
||||
@ -40,6 +42,7 @@ app.use(Field);
|
||||
placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
@ -75,6 +78,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-form @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
@ -103,6 +107,7 @@ export default {
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
@ -16,6 +17,8 @@
|
||||
: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') }}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<demo-block :title="t('fieldType')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field name="switch" :label="t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
@ -63,6 +64,7 @@
|
||||
<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">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<demo-block :title="t('title')">
|
||||
<van-form @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
@ -29,6 +30,7 @@
|
||||
: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') }}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
@ -35,6 +36,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;">
|
||||
<button type="submit"
|
||||
class="van-button van-button--primary van-button--normal van-button--block van-button--round"
|
||||
@ -50,6 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
@ -114,6 +117,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;">
|
||||
<button type="submit"
|
||||
class="van-button van-button--primary van-button--normal van-button--block van-button--round"
|
||||
@ -129,6 +133,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
@ -507,6 +512,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;">
|
||||
<button type="submit"
|
||||
class="van-button van-button--primary van-button--normal van-button--block van-button--round"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user