察见渊鱼者不详,智料隐匿者有殃。——《列子·说符》
简介
在日常开发PC
管理端界面的时候,会用到element-ui或者iviewui 框架,比较常用的input
组件是怎么封装的呢,以element-ui
框架的input
组件为例,分析一下它是怎么封装实现的,也可以为以后自己封装框架提供思路。
因为代码还是挺多的,主要分析几个点:
- 支持前置内容、后置内容、后置元素
- 支持所有原声的
type
,并且可以切换password
模式 - 支持
readonly
、disabled
、autocomplete
、maxlength
、minlength
等等 - 支持常规
input
、focus
、blur
、change
,支持新事件compositionstart
、compositionupdate
、compositionend
element-ui
是怎么做到类似与vue
的双向绑定的type
为textare
模式时,做到calcTextareaHeight
下面就一步一步分下,主要的点会着重分析,比较简单或者比较不重要的点会快速带过。
源码参考element-ui input
前置、后置
1 | <template v-if="type !== 'textarea'"> |
上面代码可以首先通过type
区分开textarea
单独处理,前后置又分为两类:
- 一类直接通过
prop
传入prefix-icon
、suffix-icon
传入前后置icon-class
显示不同的内容 - 另一类是通过
vue
中的内容分发机制slot
显示不同的内容,更灵活
在后置内容中也会处理clearable
、PwdVisible
、show-word-limit
显示不同的内容。
原声 type、其它原声属性
以input
为例,代码如下:
1 | // 其它地方省略 |
这里先不关注事件,只关注属性的设置,element-ui
支持所有input
原声的属性,其实就是通过prop
传入type
传入,如果是非password
就直接赋值给input
标签的type
属性。
如果是password
类型判断是否传入show-password
字段,根据传入判断给input
的type
复制为password
或者text
。
其它原声属性
其它属性如disabled
、readonly
、autocomplete
都是通过显示的prop
传入,哪像一些没有显示接受的prop
怎么获取到的呢,比如说maxlength
、minlength
这种没有显示接收的怎么获取到的呢。
是通过v-bind="$attrs"
获取到的,使用的时候直接通过this.$attrs.XXXX
就可以使用对应的属性。element-ui
中在检测输入长度是否超过设置的长度是有使用到如下:
1 | // 忽略部分代码 |
如果不太了解v-bind="$attrs"
的使用可以看我另一篇文章Vue 中 v-model 解析、sync 修饰符解析
原声事件、双向绑定
支持常规input
、focus
、blur
、change
,支持新事件compositionstart
、compositionupdate
、compositionend
。
常用的时间就不用多做介绍了,就是比较新事件compositionstart
、compositionupdate
、compositionend
是用来出里一段文字输入的事件。详细信息请看:
compositionstart
compositionupdate
compositionend
在外层就可以监听的到input
标签的input
、focus
、blur
、change
事件,是因为组件内部在每一个方法中都有一个this.$emit('input/focus/blur/change', evnet.target.value/event)
。
那是怎么做到修改外层通过v-model
绑定的值的呢?
要想了解他是怎么实现双向绑定的就要了解v-model
是什么,v-model
其实就是一个语法糖,在vue
编译阶段就会解析为:value="绑定的值"
和默认的@input=(value) => {绑定的值 = value}
。然后再是在input
标签上绑定的handleInput
方法如下:
1 | handleInput(event) { |
到这里input
的组件的属性基本上就解释完成,textare
基本上都是一样的,但是textarea
有一点特殊的操作。
textarea 高度自适应
它是怎么实现高度自适应的,具体的实现代码是在calcTextareaHeight,大致分为几部:
- 创建一个临时隐藏的
textarea
元素 - 通过隐藏的
textarea
计算显示的textarea
元素的高度 - 并且判断
minRows
、maxRows
属性 - 最后删除
textarea
元素,并且清空dom
引用
在input
组件中通过创建watch
监听value
值的变化,每次value
变化从新计算textarea
元素的高度。
创建一个临时隐藏的textarea
元素
1 | let hiddenTextarea; |
通过隐藏的textarea
计算显示的textarea
元素的高度
1 | const HIDDEN_STYLE = ` |
并且判断minRows
、maxRows
属性
1 | // 省略部分代码 |
最后删除textarea
元素,并且清空dom
引用
1 | // 如果存在parentNode 就清除parentNode包含的hiddenTextarea 元素 |
到此textarea
结束,可能还有很多细节没有记录到,如果有什么意见请评论。
总结
整篇文章都是根据几点分析的,如下:
- 支持前置内容、后置内容、后置元素
- 支持所有原声的
type
,并且可以切换password
模式 - 支持
readonly
、disabled
、autocomplete
、maxlength
、minlength
等等 - 支持常规
input
、focus
、blur
、change
,支持新事件compositionstart
、compositionupdate
、compositionend
element-ui
是怎么做到类似与vue
的双向绑定的type
为textare
模式时,做到calcTextareaHeight
当然还有很多的点没有记录到比如说clear
、emitter
、Migrating
等等,这个会在后面的文章中着重介绍。