EL-input

实现的功能：

1. 输入内容

2. 双向绑定

3. 密码框

4. 内容清空

5. 带icon

6. Textarea文本域

7. 字数限制

8. 带搜索等

9. 自动适应文本高度

10. 带建议模板的

input事件区别

由于在源码中el-input和el-textarea是共用的因此这里采取分开解读的方式

首先看它们最外层div的布局

再看看el-input的部分

 

可以看到本身el-input实现的功能并不多，但是因为它设置前置和后置内容的插槽，就使得该组件的功能得以被拓展，比如在前置插个select 再配个后置插个button等****

注意下：有人疑惑为啥在Input没有看到value和placeholder的bind呢？其实它通过了v-bind:$attrs已经一起都绑定过来了

（v-bind="$attrs" 可以跨层级传递props 并且将没有显式声明的Props也绑定到input中这里将父组件的value也bind在了input上了）

缺点：就是有些属性会莫名奇妙的被使用

接下来我们一个个功能过下：

第一个功能：内容清除

可以看到非常简单，就不说了。

第二个功能：密码显示

注意下：下面这种写法是相当于双重if判断

:type="showPassword ? (passwordVisible ? 'text': 'password') : type"

 

第三个功能：字数显示

这里就两个变量需要获取下  textLength(输入框内文字的个数)和upperLimit（限制的个数）

Props传入  超过了input就不会显示超出的内容

第四个功能：表单检验显示

状态以及icon的类名获取很简洁