## Input
Input component. You can use the `v-model` directive to create two-way data bindings and use a clear button to clear the content.
### Example
- Basic usage
You can use the `v-model` directive to create two-way data bindings
```html
```
```javascript
export default {
data() {
return {
value: ''
}
}
}
```
- Multiple configurations
Support most of the attributes of the input element. In addition you can use the `clearable` attribute to toggle the clear button.
```html
```
```javascript
export default {
data() {
return {
value: '',
placeholder: 'please type here...',
type: 'password',
readonly: true,
maxlength: 100,
disabled: true,
autofocus: true,
autocomplete: true,
useClear: false
}
}
}
```
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| type | type of input | String | text/number/password/date | text |
| v-model | bound value | String | - | empty |
| disabled | disabled status | Boolean | true/false | false |
| readonly | readonly status | Boolean | true/false | false |
| maxlength | maxlength of input | Number | - | 60 |
| placeholder | placeholder of input | String | - | empty |
| autofocus | autofocus status | Boolean | true/false | false |
| autocomplete | autocomplete status | Boolean | true/false | false |
| clearable | whether to show clear button | Boolean | true/false | false |
### Event
| Event Name | Description | Parameters |
| - | - | - |
| focus | This event is triggered after the input box is focused. If input is disabled, it will not be triggered | e - event |
| blur | This event is triggered after the input box blur | e - event |