docs(Form): updat demo, using inset CellGroup (#8938)
This commit is contained in:
neverland
+66
-55
@@ -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_ |
|
||||
|
||||
+77
-64
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
+16
-14
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user