[Improvement] Field: add button slot (#772)

This commit is contained in:
neverland
2018-03-25 22:12:24 +08:00
committed by GitHub
parent 199ec0cd85
commit 45859cf0a6
7 changed files with 127 additions and 93 deletions

View File

@@ -60,11 +60,13 @@ Use `error` or `error-message` to show error info
```html
<van-cell-group>
<van-field
v-model="username"
label="Username"
placeholder="Username"
error
/>
<van-field
v-model="phone"
label="Phone"
placeholder="Phone"
error-message="Invalid phone"
@@ -88,6 +90,24 @@ Textarea Filed can be auto resize when has `autosize` prop
</van-cell-group>
```
#### Insert button
Use button slot to insert button
```html
<van-cell-group>
<van-field
center
v-model="sms"
label="SMS"
placeholder="SMS"
icon="clear"
@click-icon="sms = ''"
>
<van-button slot="button" size="small" type="primary">Send SMS</van-button>
</van-field>
</van-cell-group>
```
### API
Filed support all native properties of input tagsuch as `maxlength`、`placeholder`、`readonly`、`autofocus`
@@ -114,3 +134,4 @@ Filed support all native events of input tagsuch as `focus`、`blur`、`keypr
| name | Description |
|-----------|-----------|
| icon | Custom icon |
| button | Insert button |

View File

@@ -62,11 +62,13 @@ Vue.use(Field);
```html
<van-cell-group>
<van-field
v-model="username"
label="用户名"
placeholder="请输入用户名"
error
/>
<van-field
v-model="phone"
label="手机号"
placeholder="请输入手机号"
error-message="手机号格式错误"
@@ -90,6 +92,24 @@ Vue.use(Field);
</van-cell-group>
```
#### 插入按钮
通过 button slot 可以在输入框尾部插入按钮
```html
<van-cell-group>
<van-field
center
v-model="sms"
label="短信验证码"
placeholder="请输入短信验证码"
icon="clear"
@click-icon="sms = ''"
>
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
</van-field>
</van-cell-group>
```
### API
Filed 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`placeholder`、`readonly`、`autofocus` 等
@@ -115,4 +135,5 @@ Filed 默认支持 Input 标签所有的原生事件,如 `focus`、`blur`、`k
| 名称 | 说明 |
|-----------|-----------|
| icon | 自定义icon |
| icon | 自定义输入框尾部图标 |
| button | 自定义输入框尾部按钮 |