## Field 输入框
### 使用指南
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-field": "path/to/zanui-weapp/dist/field/index"
}
}
```
### 代码演示
#### 基础用法
field 支持多种展示方式,在 `data` 中传入对应的设置即可。
```html
```
```js
Page(extend({}, {
data: {
field: {
focus: true,
title: '收货人',
placeholder: '名字',
value: 'test'
}
}
}));
```
#### 监听事件
field会触发一些事件,当你需要监听这些事件时,可以绑定对应的事件。
```html
```
```js
Page(extend({}, {
data: {
field: {
focus: true,
title: '收货人',
placeholder: '名字',
value: 'test'
}
},
methods: {
handleFieldChange(event) {
console.log(event);
},
handleFieldFocus(event) {
console.log(event);
},
handleFieldBlur(event) {
console.log(event);
}
}
}));
```
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| title | 输入框左侧标题,若传入为空,则不显示标题 | String | - | |
| name | 输入框的名字,作为 form 表单提交时数据的 key | String | componentId 指定的值 | |
| value | 输入框的内容 | String | - | |
| type | 输入框的类型,可选值为 input, textarea | String | input | |
| inputType | 输入框为 input 情况下,输入框的类型,例如:number, text, password | String | text | |
| placeholder | 输入框为空时占位符 | String | | |
| focus | 自动聚焦,拉起键盘 | Boolean | false | |
| disabled | 输入框是否禁用 | Boolean | false | |
| mode | 输入框展示样式,可选值为 wrapped, normal | String | normal | |
| right | 输入框内容是否居右显示 | Boolean | false | |
| error | 是否显示为输入框错误情况下的样式 | Boolean | false | |
| componentId | 用于区分输入框之间的唯一名称 | String | - | |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | event对象 |
| focus | 输入框focus | event对象 |
| blur | 输入框blur | event对象 |