# Input 输入框
通过鼠标或键盘输入内容，是最基础的表单域的包装。

## 何时使用
- 需要用户输入表单域内容时。
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。


### 基本使用
基本使用。

@[demo](./demo/basic.vue)


### 同步值时自动清空前后空格
使用`auto-trim`可以自动清空前后空格。

@[demo](./demo/auto-trim.vue)

### 自动选中内容 
使用`select-on-focus`字段当聚焦时会选中内容

@[demo](./demo/select-on-focus.vue)


### 感知输入法
使用`composition`字段设置感知中文等输入法。

@[demo](./demo/composition.vue)

### 禁用状态
使用`disabled`字段设置为禁用

@[demo](./demo/disabled.vue)

### 只读状态
使用`readonly`字段设置为只读， 但是可以选中

@[demo](./demo/readonly.vue)


### 回车事件
可设置`enter`事件来接收回车事件

@[demo](./demo/enter.vue)

### 带 icon 的输入框
带有图标标记输入类型

@[demo](./demo/presuffix.vue)


### 尺寸
支持`large`和`small`的`size`设置

@[demo](./demo/size.vue)


### 前置/后置标签
用于配置一些固定组合。

@[demo](./demo/addon.vue)



## Input props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 输入框内容 | String | "" |  |
| type | 输入框类型 | String | "text" | "password" |
| composition | 是否感知输入法 | Boolean | false | - |
| select-on-focus | 当focus时选中内容 | Boolean | false | - |
| suffix-icon | 输入框头部图标 | String | - | - |
| prefix-icon | 输入框尾部图标 | String | - | - |
| auto-trim | 自动trim前后的空格 | Boolean | false | true |

input支持`原生属性`所有属性

## Input events
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| enter | 回车事件 | event |

## Input methods
| 方法 | 说明 | 参数 |
| --- | --- | --- |
| focus | 使输入框focus | - |

## Input slots
| 插槽名 | 说明 |
| --- | --- |
| prefix | 输入框前置内容 |
| suffix | 输入框后置内容 |