mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 18:54:24 +00:00
Field: support $attrs & $listeners
This commit is contained in:
陈嘉涵
@@ -1,8 +1,6 @@
|
||||
<style>
|
||||
.demo-field {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,17 +8,11 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: 'zhangmin'
|
||||
value: '',
|
||||
password: '',
|
||||
username: 'zhangmin',
|
||||
message: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onIconClick() {
|
||||
this.username = '';
|
||||
},
|
||||
|
||||
onFieldBlur() {
|
||||
console.log('blured');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -39,92 +31,78 @@ Vue.component(Field.name, Field);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
通过 v-model 绑定输入框的值
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义类型
|
||||
根据`type`属性定义不同类型的输入框
|
||||
|
||||
:::demo 自定义类型
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
type="text"
|
||||
label="用户名："
|
||||
placeholder="请输入用户名"
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
icon="clear"
|
||||
:on-icon-click="onIconClick"
|
||||
@blur="onFieldBlur"
|
||||
required></van-field>
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="密码："
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required>
|
||||
<template slot="icon">
|
||||
<van-icon name="search"></van-icon>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 无label的输入框
|
||||
#### 禁用输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo 无label的输入框
|
||||
:::demo 禁用输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
<van-field value="输入框已禁用" label="用户名" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带border的输入框
|
||||
#### 错误提示
|
||||
|
||||
传入一个`border`属性。
|
||||
|
||||
:::demo 带border的输入框
|
||||
```html
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border></van-field>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用的输入框
|
||||
|
||||
传入`disabled`属性即可。
|
||||
|
||||
:::demo 禁用的输入框
|
||||
:::demo 错误提示
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
<van-field label="用户名" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 错误的输入框
|
||||
#### 高度自适应
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
传入`error`属性即可。
|
||||
|
||||
:::demo 错误的输入框
|
||||
:::demo 高度自适应
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Autosize的输入框(仅支持textarea)
|
||||
|
||||
传入`autosize`属性, 且将`rows`设为1。
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
@@ -133,23 +111,24 @@ Vue.component(Field.name, Field);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `String` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `String` | | |
|
||||
| value | 输入框的值 | `String` | | |
|
||||
| label | 输入框标签 | `String` | | |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `Boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `String`, `Number` | | |
|
||||
| rows | textarea rows | `String`, `Number` | | |
|
||||
| cols | textarea cols | `String`, `Number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `Boolean` | `false` | `true`, `false` |
|
||||
| icon | 输入框尾部图标 | `String` | | icon中支持的类型 |
|
||||
| onIconClick | 点击图标的回调函数 | `Function` | | |
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
| label | 输入框标签 | `String` | - | - |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | - |
|
||||
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
|
||||
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
| click-icon | 点击尾部图标时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon |
|
||||
|
||||
|
||||
Reference in New Issue
Block a user