456主机测评
今天给大家讲一下ElementUI组件源码。输入框是使用频率较高的控件之一。HTML中原生支持input标签。ElementUI组件对原生input textarea进行了封装。除了对输入框本身的功能做了丰富，还与之前讲的el-form等组件有联动关系。接下来就来看看对原生的封装以及联动都是如何实现的。
先来看模板，根节点是div包裹了三个部分。当需要展示input的输入框时，则渲染第一个部分。而当需要展示textarea文本域时的渲染第二个部分。这两个部分是互斥的，第三部分用来在展示文文域时提示字数限制。来看第一个input部分。这一部分除了包含原声音部的标签外。还有很多其他节点，按顺序看第一个节点对应着输入框前置内容，提供了prepend命名插槽。传入的prepend插槽内容会默认在输入框外部的前方渲染。第二个节点就是input的标签对应的输入框本身。
接下来的两个节点分别对应着输入框头部内容和尾部内容。这两部分默认是渲染在输入框内部的。头部部分提供了prefix命名插槽以及prefix icon的渲染。尾部部分提供了suffix命名插槽以及用来清除内容的closelcon。用来切换显示隐藏密码内容的viewlcon。自动限制的提示文字，以及提示验证结果的validatelcon渲染。最后一个节点对应的输入框的后置内容。和第一个节点类似，提供了append的命名插槽。其他两个部分，Textarea部分和字数限制的提示部分比较简单。Taxtarea部分就是一个原生的textarea标签。字数限制是一个span标签，显示当前字数和限制字数的文字。
接着来script看的部分，Name componentname以及mixins中emitter不再赘述。这里的migrting混入，其作用是在控制台中打印一些组件的非兼容性改动,在组建mounted时，获取当前组建实例的getmigratingconfig方法。这个方法返回需要提示的props和events他们对应的改动说明。el-input组件曾经是有icon和on icon click的props以及click事件。而icon Pro现在已经被suffix-icon和prefix-icon所替代，Click事件也已经删除了。Inheritattrs选项是在二次封装组件时最常用的选项。经常搭配以$attrs作为参数的v-bind指令使用。以上就是ElementUI的源码分析，希望对大家有所帮助，如果还有疑问，欢迎在下方留言讨论。
- 海报
