el-input 源码

el-input 是 Element UI 组件库中的一个输入框组件，它支持多种类型的输入，包括文本、数字、密码等。它的源码可以在 Element UI 的 GitHub 仓库中找到，具体地址为：https://github.com/ElemeFE/element/blob/master/packages/input/src/input.vue。

以下是 el-input 的源码解析：

1. template 部分

el-input 的模板部分使用了 Vue 的模板语法，其中包含了 input 标签、icon 图标、清空按钮、计数器等元素。其中，计数器的显示与隐藏、清空按钮的显示与隐藏、icon 图标的显示与隐藏等都是通过计算属性和方法来控制的。

2. props 部分

el-input 接收了多个 prop，包括 value、type、size、placeholder、disabled、readonly、maxlength、show-word-limit、clearable 等。这些 prop 都会在组件内部进行处理，并且有一些默认值。

例如，如果未传入 value，则默认为一个空字符串；如果未传入 type，则默认为 "text"；如果未传入 size，则默认为 "medium"。

3. methods 部分

el-input 定义了多个方法，包括 handleInput、handleChange、handleFocus、handleBlur、handleClearClick、handleIconClick 等。这些方法分别用于处理输入框输入事件、值变化事件、获取焦点事件、失去焦点事件、清空按钮点击事件、icon 图标点击事件等。

4. computed 部分

el-input 定义了多个计算属性，包括 currentPlaceholder、showClear、showPwd、showEye、showWordLimit 等。这些计算属性用于控制输入框的 placeholder、清空按钮、密码显示、密码眼睛图标、计数器等的显示和隐藏。

5. watch 部分

el-input 监听了多个属性的变化，包括 value、disabled、readonly、maxlength 等。当这些属性发生变化时，会触发相应的回调函数，从而对输入框进行更新或者处理。

以上是 el-input 的源码解析，希望对你有所帮助。