# 3.30 Input 输入框
### 简介
输入框组件 `Input` 通过鼠标或键盘输入表单域内容，提供复合型型输入框，带搜索的输入框，还可以进行大小选择。 本文将分析其源码实现，耐心读完，相信会对您有所帮助。🔗 [组件文档 Input](https://element.eleme.cn/#/zh-CN/component/input) 🔗 [gitee源码](https://gitee.com/ElemeFE/element/blob/dev/packages/input/src)
更多组件剖析详见 👉 [**📚 Element 2 源码剖析组件总览**](https://juejin.cn/post/6994721241194037255) 。
### 模板HTML
组件的 `props` 声明，各属性功能描述详见[官方文档Input#attributes](https://element.eleme.cn/#/zh-CN/component/input#input-attributes) 。
组件根元素是一个类名为`el-textarea`或`el-input`的 div 元素，元素内容包含了三部分：
1. 封装原生 `input` 控件实现单行文本输入框。
2. 封装原生 `textarea` 控件多行文本输入文本域。
```html
// packages\input\src\input.vue
```
### 组件根元素
* 属性`type`值确定使用 `el-textarea` 或 `el-input`。
* 组件尺寸`inputSize`生成样式 `el-input--medium/small/mini`。
* 禁用状态`inputDisabled` 生成样式 `is-disabled`。
* 开启输入长度限制，输入超限时`inputExceed`生成样式 `is-disabled`。
* 复合型输入框样式`el-input-group`、`el-input-group--append/prepend`根据前置/后置插槽内容生成。
* 头部/尾部样式`el-input--prefix`、`el-input--suffix`根据插槽内容或功能属性值生成。
* 添加了鼠标移入移出事件，使用内部属性 `hover` 记录元素悬停状态。
```html
// ...
```
### 单行文本输入
单行文本输入框通过封装原生 `input` 控件实现,支持控件的原生属性。组件通过组合以下多种元素实现文本框 `text`或密码框`password`等复合型输入框功能：
1. 输入框前置内容，提供具名插槽`prepend`,内容一般为标签或按钮。
2. 原生 input 表单输入控件，添加了自定义事件。
3. 输入框头部内容，可以通过 `prefix-icon` 或具名插槽`prefix`增加显示图标。
4. 输入框尾部内容，可以通过 `suffix-icon` 或具名插槽`suffix`增加显示图标。该元素也用于展示输入框清空Icon、密码显隐切换Icon以及展示输入字数统计。
5. 输入框后置内容，提供具名插槽`append`,内容一般为标签或按钮。
```html
// ...
// ...
```
组件渲染效果如下:
> 输入框头部/尾部都提供了具名插槽用于增加显示图标，当然也可以传入文本等其他内容，但不建议这么做。
当设置头部/尾部内容时, input 输入框通过属性 `padding` 提供了 `30px` 的宽度区域用于内容展示。头部/尾部元素使用绝对布局，将内容偏移覆盖至 padding 区域。
```css
.el-input__prefix {
position: absolute;
height: 100%;
left: 5px;
top: 0;
}
.el-input__suffix {
position: absolute;
height: 100%;
right: 5px;
top: 0;
}
.el-input--prefix .el-input__inner {
padding-left: 30px;
}
.el-input--suffix .el-input__inner {
padding-right: 30px;
}
```
以下示例将自定义文本传入插槽。
```html
头部内容
尾部内容
```
示例渲染出现内容覆盖 
#### input 元素类型
组件默认使用 `text` 类型的input控件。当设置 `showPassword`可得到一个可切换显示隐藏的密码框，内部属性`passwordVisible`记录显隐状态，根据不同的状态使用 `password` 或 `text` 类型。
```js
:type="showPassword ? (passwordVisible ? 'text': 'password') : type"
```
属性 `type` 值也可设置为其他[原生input的type值](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#input_types)。
```html
```
使用其他原生类型时组件渲染效果，但是一般不建议这么使用！一般组件类库都会提供对应的更加丰富的功能组件，使用库组件页面样式风格更加统一，提升用户交互体验。
#### 输入法编辑器(IME)事件
输入法在中文、日文和韩文等少数语言中使用。以中文拼音输入法为例，输入的过程大致可以分为**组字（composition）** 和 **提交（commit）** 两阶段。比如想打“你好”两个字，会在输入框输入“nihao”的拼音，当输入第一个字母“n”时，组字过程就开始了。此时本地的 IME（input method editor） 软件（比如微软/搜狗拼音输入法）会为我们提供**组字框**和**候选列表**的 UI 组件。
> 关于输入法事件更多介绍，请阅读 [Web 键盘输入法应用开发指南 —— 输入法事件](https://xie.infoq.cn/article/49640d0f3c0ba0d793f6b7501)。
`compositionstart`、`compositionupdate`和`compositionend`是一组事件。
1. 首先是使用拼音输入法开始输入汉字时 `compositionstart` 被触发，组字框和候选列表相应出现；
2. 此后，每按一个新键，就会触发 `compositionupdate`，此时组字框和候选列表的内容也发生变化；
3. 当选择了候选列表中的某个字或词，或者敲击空格（中文输入法），`compositionend` 事件会触发，表明输入被提交。
4. 当取消输入时，比如使用鼠标单击页面空白处，就会终止当前输入，也会触发`compositionend` 事件。
属性`isComposing`值为 `true`表示用户正在输入。输入结束后（选择字词或者取消），调用方法`handleInput`，触发组件 `input` 事件。
```js
// @compositionstart="handleCompositionStart"
// @compositionupdate="handleCompositionUpdate"
// @compositionend="handleCompositionEnd"
handleCompositionStart() {
this.isComposing = true; // 正在输入
},
handleCompositionUpdate(event) {
const text = event.target.value;
const lastCharacter = text[text.length - 1] || '';
// 韩文字符编码 判断最后一个字符是否特殊的功能键 Process Key
this.isComposing = !isKorean(lastCharacter);
},
handleCompositionEnd(event) {
// 输入结束后，触发 input 事件
if (this.isComposing) {
this.isComposing = false;
this.handleInput(event);
}
},
```
#### input/change 事件
* 当 ``、`