# UInput 单行输入
- [示例](#示例)
- [基本用法](#基本用法)
- [加密](#加密)
- [双向绑定](#双向绑定)
- [只读和禁用](#只读和禁用)
- [可清除](#可清除)
- [展示方式](#展示方式)
- [大小扩展](#大小扩展)
- [添加图标](#添加图标)
- [API]()
- [Props/Attrs](#propsattrs)
- [Slots](#slots)
- [Events](#events)
- [Methods](#methods)
**Form**
基本的表单输入组件
## 示例
### 基本用法
大部分属性与原生``控件一致。
``` html
```
### 加密
将`type`属性设置为`password`可以加密显示，`password` 属性增加密码显示按钮。
``` html
```
### 双向绑定
使用`v-model`或`:value.sync`进行双向绑定。
提示：如果需要绑定的值自动转换为 number 类型，可以使用`number`修饰符。
``` vue
```
### 只读和禁用
``` html
```
### 可清除
开启`clearable`属性，在输入框有内容时会显示清空按钮。
``` html
```
### 展示方式
默认为行内展示，可以将`display`设置为块级展示。
``` html
与文字对齐
```
### 大小扩展
由`width`和`height`设置输入框宽高，默认值为`normal`，候选值包括：`mini`、`small`、`normal`、`medium`、`large`、`huge`、`full`。
``` html
```
### 添加图标
```html
111
```
## API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| minlength | number | | | |
| spellcheck | boolean | | | 原生属性 |
| maxlengthMessage | string | | | 输入内容达到上限时的错误提示，且被 [FormItem](#/components/u-form) 包裹时生效 |
| type | string | `[object Object]`
`[object Object]` | `'text'` | 文本框或者密码框 |
| value.sync, v-model | string | | | 输入的值 |
| placeholder | string | | | 为空时显示的占位符文本 |
| maxlength | number | | | |
| autofocus | boolean | | `false` | 设置是否自动获取焦点 |
| prefix | icon | | `''` | |
| suffix | icon | | `''` | |
| clearable | boolean | | | 可点击清除按钮一键清除内容 |
| password | boolean | | `false` | 显示状态分为“True(显示)/False(隐藏)”，默认为“显示” |
| readonly | boolean | | `false` | 正常显示，但禁止选择/输入 |
| disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） |
| width | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 设置单行输入框宽度大小 |
| height | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 设置单行输入框高度大小 |
### Slots
#### (default)
插入 HTML 或 `Component`, 可展示额外内容。
### Events
#### @before-input
输入前触发。可以在这个阶段阻止输入，或者修改输入的值 $event.value
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.oldValue | string | 旧的值 |
| $event.value | string | 输入框的值 |
| $event.preventDefault | Function | 阻止输入流程 |
| senderVM | UInput | 发送事件实例 |
#### @input
输入时触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | string | 输入框的值 |
| senderVM | UInput | 发送事件实例 |
#### @change
值变化时触发。（注意：与原生事件不同）
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | string | 改变后的值 |
| $event.oldValue | string | 旧的值 |
| senderVM | UInput | 发送事件实例 |
#### @focus
获得焦点时触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | FocusEvent | 原生事件对象 |
| senderVM | UInput | 发送事件实例 |
#### @blur
失去焦点时触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | FocusEvent | 原生事件对象 |
| senderVM | UInput | 发送事件实例 |
#### @before-clear
清空前触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | string | 清空后的值 |
| $event.oldValue | string | 待清空的值 |
| $event.preventDefault | Function | 阻止清空流程 |
| senderVM | UInput | 发送事件实例 |
#### @clear
清空后触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | string | 清空后的值 |
| $event.oldValue | string | 旧的值 |
| senderVM | UInput | 发送事件实例 |
#### @click-prefix
点击前缀图标后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 鼠标事件对象 |
#### @click-suffix
点击后缀图标后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 鼠标事件对象 |
#### @keydown
键盘按键按下时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 键盘按键事件对象 |
#### @keyup
键盘按键松开时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 键盘按键事件对象 |
Methods
#### focus()
让输入框获取焦点。
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
#### blur()
让输入框失去焦点。
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
#### clear()
清空输入框。
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |