ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-12-24 02:02:09 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

field component

Browse Source
This commit is contained in:
cookfront
2017-02-14 17:05:43 +08:00
parent 975c39029b
commit fb7089fd35
6 changed files with 164 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
docs/examples/field.md
View File

@@ -1,7 +1,55 @@
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
## Field组件
表单中`input`或`textarea`的输入框。
### 基础用法
:::demo 根据`type`属性显示不同的输入框。
```html
<o2-cell-group>
<o2-field type="text" label="用户名：" placeholder="请输入用户名"></o2-field>
<o2-field type="password" label="密码：" placeholder="请输入密码"></o2-field>
<o2-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></o2-field>
</o2-cell-group>
```
:::
### 无label的输入框
:::demo 根据`type`属性显示不同的输入框。
```html
<o2-cell-group>
<o2-field type="text" placeholder="请输入用户名"></o2-field>
</o2-cell-group>
```
:::
### 监听change事件
:::demo 根据`type`属性显示不同的输入框。
```html
<o2-cell-group>
<o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>
</o2-cell-group>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
@@ -12,4 +60,5 @@
| label | 输入框标签 | string | '' | |
| disabled | 是否禁用输入框 | boolean | false | |
| readonly | 输入框是否只读 | boolean | false | |
| maxlength | 输入框maxlength | [String, Number] | '' | |