mirror of
https://github.com/youzan/vant.git
synced 2025-12-24 02:02:09 +08:00
[Improvement] Field: add button slot (#772)
This commit is contained in:
@@ -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 tag,such as `maxlength`、`placeholder`、`readonly`、`autofocus`
|
||||
|
||||
@@ -114,3 +134,4 @@ Filed support all native events of input tag,such as `focus`、`blur`、`keypr
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| icon | Custom icon |
|
||||
| button | Insert button |
|
||||
|
||||
@@ -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 | 自定义输入框尾部按钮 |
|
||||
|
||||
Reference in New Issue
Block a user