alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages 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
19 changed files with 1207 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/field/README.zh-CN.md
+77 -64
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