element-ui input组件源码学习

学习了很多input组件的前置内容,下面就要开始学习下input组件了。

一、html部分

input部分

整个组件是在一个大的div之中的,看下这个div下的几个属性,

:class="[
type === 'textarea' ? 'el-textarea' : 'el-input',
inputSize ? 'el-input--' + inputSize : '',
{
'is-disabled': inputDisabled,
'el-input-group': $slots.prepend || $slots.append,
'el-input-group--append': $slots.append,
'el-input-group--prepend': $slots.prepend,
'el-input--prefix': $slots.prefix || prefixIcon,
'el-input--suffix': $slots.suffix || suffixIcon || clearable
}
]"
@mouseenter="hovering = true"
@mouseleave="hovering = false"

type表示当前是textarea或input,他们对应了不同的样式属性,inputSize则决定了当前组件的大小,对象那个之中,is-disabled决定了当前组件是否是disabled状态,剩下五个属性都是用于修改样式,配合显示头部与尾部组件的。

再加mouseenter和mouseleave事件,用于修改表示鼠标是否再input上方的变量。(这两个事件是不冒泡的)

往内部是一个template,用于当是input时,显示内部的元素。此处使用template可以减少一层元素嵌套,我们都知道template在渲染到dom中时,是没有这层元素的。

在往内层,有个样式是el-input-group__prepend的div,该元素表示了组件的前置内容,如

《element-ui input组件源码学习》

当然也可以和官网上一样,放select元素。

随后是input元素,直接能看懂的简单属性就不说了,看下几个特殊的属性吧。

  • v-bind=”$attrs”

该属性是用于将父辈组件传入的未使用的参数继续传给子组件。而js中的inheritAttrs属性是配合一起使用的,表示是否不会把未被注册的props呈现为普通的HTML属性。

  • composition*事件

input上有关composition的事件可以查看我的另一篇文章:js复合事件

接着是一个span元素,放置用于显示输入框内前部内容的元素。name=”prefix”的槽元素是放置了显示文字,i元素则是防止prefix-icon为class的icon图标。该元素用绝对定位移动到输入框前防,而input则设置左padding,让文字和图标不重合。

后面是用于显示再输入框中内部后方的元素块。先看下类是el-input__suffix-inner的span元素,name=”suffix”的槽元素用于显示输入框内后部的文字,而i是icon的显示。如:

《element-ui input组件源码学习》

而包含el-input__clear的类名i元素与尾部的元素只能优先显示一种,当我们在输入内容的时候,就会显示这个清空输入框的查查按钮。

而随后的i元素则是配合表单验证时,检测输入验证错误提示的。

input组件最后一个div元素,用于显示该组件的后置图标,如:

《element-ui input组件源码学习》

官网上也提供了增加button的方式。

textarea部分

与input部分基本一致,不多说了。

二、JS部分

emitter的可以看这篇:element-ui-emitter-js文件源码学习

migrating的可以看这篇:element-ui focus.js和migrating.js文件源码学习

calcTextareaHeight的可以看这篇:element-ui calcTextareaHeight.js文件源码学习

merge和shared的可以看这篇:element-ui merge.js和shared.js文件源码学习

直接看export的对象,

name

名称

componentName

组件名称

mixins

混入emite事件和migrating。

inheritAttrs

前面也讲到了,和$attrs一起使用,用来表示是否不会把未被注册的props呈现为普通的HTML属性,使得这些属性可以被子组件继承。

inject

注入elForm和elFormItem对象,配合form一起使用,防止对象为空,报错。

data()

currentValue

currentValue表示当前组件的value值,其中用三目运算符,用于处理一些异常值。内部的一个仅用于保存当前值的变量。

textareaCalcStyle

用于存放textarea计算style样式。

hovering

鼠标是否悬浮在组件上方。

focused

组件是否已经聚焦。

isOnComposition

是否正在修改中。

valueBeforeComposition

使用输入法时,记录修改前的值。

props

value

初始时传入的值。

size

输入框尺寸,非textarea时生效。

resize

控制是否能被用户缩放。

form

留着,没看出有啥用。。

disabled

组件是否禁用。

readonly

组件是否只读,原生属性。

type

input的类型(可能是textarea)。

autosize

自适应内容高度,当是 textarea 时,可传入对象,如{ minRows: 2, maxRows: 6 },表示textarea可拖动的最大最小范围。

autocomplete

原生属性,自动补全。

autoComplete

原生属性,自动补全,但此属性要被替换,用 autocomplete 代替他。

validateEvent

输入时是否触发表单的校验。

suffixIcon

输入框头部图标。

prefixIcon

输入框尾部图标。

label

输入框关联的label文字。

clearable

是否可清空。

tabindex

输入框的tabindex,原生属性。

computed

_elFormItemSize()

fromitem大小。

validateState()

组件的当前状态,可以修改icon的样式。

needStatusIcon()

是否要显示状态的图标。

validateIcon()

输入验证,错误的图标样式。

textareaStyle()

合并textarea的style样式,并显示。

inputSize()

input组件的大小,优先级 本生 > formitem。

inputDisabled()

input组件是否是disabled状态。

showClear()

是否显示清空输入框的叉叉按钮,判断条件比较多,首先要支持显示,不是只读和禁用状态,当前值不能是空的,并且当前已经聚焦或者处于鼠标悬浮状态。

watch

value(val, oldValue)

监听value变化,触发修改currentvalue。

methods

focus()

聚焦表单输入元素。

blur()

表单输入元素失焦。

getMigratingConfig()

提示迁移的属性。

handleBlur(event)

元素失焦处理函数,

// 重置状态
this.focused = false;
// 触发实例上的blur事件
this.$emit('blur', event);

select()

选中对应的输入元素,会触发元素上的focus事件。

(this.$refs.input || this.$refs.textarea).select();

利用ref选取元素,并选中该元素。

resizeTextarea()

重新刷新 textarea ,重新计算样式。

if (this.$isServer) return;
if (type !== 'textarea') return;

服务器渲染或非textarea时,不去计算。

当不设置autosize时,则直接使用calcTextareaHeight,否则传入minRows与maxRows计算。

handleFocus(event)

focus时的处理函数。

// 重置状态
this.focused = true;
// 触发实例上的focus事件
this.$emit('focus', event);

handleComposition(event)

当输入法结束后,进行变量的处理,并取触发input修改。

// 输入法结束,重装composition状态
this.isOnComposition = false;
// 保存currentValue
this.currentValue = this.valueBeforeComposition;
this.valueBeforeComposition = null;
// 触发input修改
this.handleInput(event);

其他状态时,获取最后一个字符,这儿对korean字体做了特别判断,korean的坑先留着。

当时start时,先保留先前的变量。

if (this.isOnComposition && event.type === 'compositionstart') {
    // 刚开始输入时,提前保存输入法启动前的值
    this.valueBeforeComposition = text;
}

handleInput(event)

先看下该函数的调用时刻,

修改value值,直接的键盘输入(非输入法),会直接触发 handleInput 函数,如果是输入法输入,将会在composition**之后才触发 handleInput 函数。

const value = event.target.value;
this.setCurrentValue(value);
// 正在修改输入法时,不去处理
if (this.isOnComposition) return;
// 修改组件的model值
this.$emit('input', value);

handleChange(event)

用于触发实例的change事件。

setCurrentValue(value)

首先,编辑中并且当前值与修改值没有变化(输入法输入后,没确认,又删除了),不做处理。

随后将value赋值给currentValue,正在编辑中的也不做处理。

此处使用了$nextTick做处理,

// 第一次由handleInput函数调入,此时value值(model)未修改,所以使用了nextTick处理
// 第二次进入是因为watch了value的变化,此时value与currentValue相同,会触发后面的dispatch
this.$nextTick(this.resizeTextarea);

calcIconOffset(place)

用于计算图标的偏移量。

一上来使用slice方法,并用call将nodeList转成正常的数组。空数组不做处理。

// 过滤无效的,看了,似乎没啥用,因为elList选出的元素的parentNode都是组件本身
for (let i = 0; i < elList.length; i++) {
    if (elList[i].parentNode === this.$el) {
        el = elList[i];
        break;
    }
}

随后使用translate设置图标的位置,

if (this.$slots[pendant]) {
    // 当存在输入框外部的前后元素时,需要计算输入框内图标与文字的位置,并用translate动画加以移动开
    // 个人感觉在这是不是可以重新计算下输入框的右padding值,使得输入框内的文字不会与输入内容重合
    el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
} else {
    // 删除增加过的style样式
    el.removeAttribute('style');
}

updateIconOffset()

更新图标偏移量,计算prefix和suffix图标。

clear()

点击输入框内的清空按钮触发。

// 设置组件value值为空
this.$emit('input', '');
// 触发实例上的change事件
this.$emit('change', '');
// 触发实例上的clear事件
this.$emit('clear');
// 清空输入框中的值,置为空字符串
this.setCurrentValue('');
this.focus();

created()

// 绑定inputSelect事件
this.$on('inputSelect', this.select);

mounted()

挂载成功后处理函数,resize了textarea和计算了icon的位置。

updated()

每次组件值有更新时,触发icon更新。

代码地址:input.vue

点赞
  1. Mr.guo说道:

    大佬能不能弄一个element-ui 的select选择器的源码组件,我这边实现了选择器下拉,点击每一项改变内容,鼠标上下选择,enter也可以改变,但是数据只能写死,因为异步获取数据时,我的显示项固定为一个属性值,如果获取的数据中没有该属性值,那么数据可以渲染,但是数据显示不了,这个怎么解决,希望能提供一点帮助,

    1. 2fps说道:

      “如果获取的数据中没有该属性值,那么数据可以渲染,但是数据显示不了”,这边不太理解,异步获取到数据后放到data中,框架会自动去渲染,为何渲染了无法显示?

发表评论

电子邮件地址不会被公开。