## Input

### Javascript
```javascript
export default {
  data() {
    return {
      text: '',
      username: '',
      address: '',
      verificationCode: '',
      phone: '',
      password: '',
      phoneCode: '',
      userID: '1234567890',
    };
  },
  methods: {
    /* 右侧图标点击事件 */
    onClickIcon() {
      window.alert('点击了右侧 icon');
    },
  },
}
```

### 基本用法

```html
<v-input v-model="text" placeholder="请输入"></v-input>
```

### 组合形式
`label` 属性可以在 输入框 前增加显示 label 。
`clearable` 属性为 `Boolean` 值，为 `true` 的话在输入时显示删除图标。
```html
<v-input
  v-model="username"
  label="用户名"
  placeholder="请输入用户名"
  :clearable="true"
>
</v-input>
```

通过 `slot` 可以自定义输入框前后的元素。`slot` 有两个可选值: `prefix`, `suffix`;
```html
<v-input
  v-model="address"
  placeholder="请输入地址"
  :clearable="true"
>
  <div slot="prefix" class="address-label">
    <v-icon name="address-empty" size="sm"></v-icon>
    <span>地址</span>
  </div>
</v-input>

<v-input
  v-model="phoneCode"
  label="验证码"
  placeholder="请输入验证码"
>
  <v-button slot="suffix" type="primary" style="marginLeft: 0.1rem">验证</v-button>
</v-input>
```

`left-icon`, `right-icon`, 值为图标名称，支持的图标详见 `Icon` 组件， 可以为 输入框前后设置图标。
其中 `right-icon` 支持点击事件回调，属性名为 `iconhandle`, 类型为 `Function`;
```html
<v-input
  v-model="username"
  left-icon="edit"
  right-icon="warn-empty"
  :iconhandle="onClickIcon"
  placeholder="请输入用户名"
  :clearable="true"
>
</v-input>
```

### 支持不同的类型
`type` 字段支持不同的类型(同原生一样)，比如 `number`, `password`, 默认为 `text`
```html
<v-input
  v-model="verificationCode"
  label="验证码"
  type="number"
  placeholder="请输入6位数字验证码"
>
</v-input>

<v-input
  v-model="phone"
  label="手机号码"
  type="tel"
  placeholder="请输入正确的手机号"
>
</v-input>

<v-input
  v-model="password"
  label="密码"
  type="password"
  placeholder="请输入密码"
>
</v-input>
```

### 禁用输入状态
```html
<v-input
  v-model="userID"
  label="身份证"
  :disabled="true"
  placeholder="请输入6位数字验证码"
>
</v-input>
```



### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| type  | 支持的输入类型  | String   |    | text |
| height  | 高度 正整数 会转化成rem单位  | Number   |    | 56 |
| placeholder  | 用户填写输入字段的提示   | String   |    | 空字符串 |
| clearable  | 输入文本时显示清除图标  | Boolean   | true, false | false |
| label | 输入框前的label标签文字    | String   |  | 空字符串 |
| label-width  | 标签的宽度 单位为 em    | Number   |  | 4 |
| label-align  | 标签的对其方式   | String | left, center, right   | left |
| left-icon  | 输入框左侧图标 值为图标名    | String   | 可用名见 Icon 组件 |  |
| right-icon  | 输入框右侧图标 值为图标名    | String   | 可用名见 Icon 组件 |  |
| iconhandle | 输入框右侧图标回调函数    | Function   |  |  |
| disabled  | 输入框是否可用   | Boolean   | true, false | false |
| readonly  | 规定输入字段为只读   | Boolean | true, false   | false |
| maxlength  | 规定输入字段中的字符的最大长度    | Number   |  | Infinity |
| autofocus  | 自动获得焦点   | Boolean   | true, false | false |

### slot
| name      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| prefix  | 自定义输入框前边的元素  |    |    |  |
| suffix  | 自定义输入框后面的元素  |   |    |  |