input 输入框组件
源码：
<template>
<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时-->
<template v-if="type !== 'textarea'">
<!-- 前置元素 -->
<div class="el-input-group__prepend" v-if="$slots.prepend">
<slot name="prepend"></slot>
</div>
<!--核心部分：输入框-->
<input
:tabindex="tabindex"
v-if="type !== 'textarea'"
class="el-input__inner"
v-bind="$attrs"
:type="type"
:disabled="inputDisabled"
:readonly="readonly"
:autocomplete="autoComplete || autocomplete"
:value="currentValue"
ref="input"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
:aria-label="label"
>
<!-- input框内的头部的内容 -->
<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
<slot name="prefix"></slot>
<!--prefixIcon头部图标存在时，显示i标签-->
<i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"></i>
</span>
<!-- input框内的尾部的内容 -->
<span class="el-input__suffix" v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon">
<span class="el-input__suffix-inner">
<!--showClear为false时，显示尾部图标-->
<template v-if="!showClear">
<slot name="suffix"></slot>
<i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon"></i>
</template>
<!--showClear为true时，显示清空图标-->
<i v-else class="el-input__icon el-icon-circle-close el-input__clear" @click="clear"></i>
</span>
<!--这里应该是跟表单的校验相关，根据校验状态显示对应的图标-->
<i class="el-input__icon" v-if="validateState" :class="['el-input__validateIcon', validateIcon]"></i>
</span>
<!-- 后置元素 -->
<div class="el-input-group__append" v-if="$slots.append">
<slot name="append"></slot>
</div>
</template>
<!--当type的值等于textarea时-->
<textarea
v-else
:tabindex="tabindex"
class="el-textarea__inner"
:value="currentValue"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput"
ref="textarea"
v-bind="$attrs"
:disabled="inputDisabled"
:readonly="readonly"
:autocomplete="autoComplete || autocomplete"
:style="textareaStyle"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
:aria-label="label"
>
</textarea>
</div>
</template>
<script>
import emitter from 'element-ui/src/mixins/emitter';
import Migrating from 'element-ui/src/mixins/migrating';
import calcTextareaHeight from './calcTextareaHeight';
import merge from 'element-ui/src/utils/merge';
import { isKorean } from 'element-ui/src/utils/shared';
export default {
name: 'ElInput',
componentName: 'ElInput',
mixins: [emitter, Migrating],
inheritAttrs: false,
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
data() {
return {
currentValue: this.value === undefined || this.value === null
? ''
: this.value,
textareaCalcStyle: {},
hovering: false,
focused: false,
isOnComposition: false,
valueBeforeComposition: null
};
},
props: {
value: [String, Number], //绑定值
size: String, //输入框尺寸，只在type!="textarea" 时有效
resize: String, //控制是否能被用户缩放
form: String,
disabled: Boolean, //禁用
readonly: Boolean,
type: { //类型texttextarea和其他原生input的type值
type: String,
default: 'text'
},
autosize: { //自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
type: [Boolean, Object],
default: false
},
autocomplete: {
type: String,
default: 'off'
},
/** @Deprecated in next major version */
autoComplete: {
type: String,
validator(val) {
process.env.NODE_ENV !== 'production' &&
console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
return true;
}
},
validateEvent: { //输入时是否触发表单的校验
type: Boolean,
default: true
},
suffixIcon: String, //输入框尾部图标
prefixIcon: String, //输入框头部图标
label: String, //输入框关联的label文字
clearable: { //是否可清空
type: Boolean,
default: false
},
tabindex: String //输入框的tabindex
},
computed: {
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
//校验状态
validateState() {
return this.elFormItem ? this.elFormItem.validateState : '';
},
needStatusIcon() {
return this.elForm ? this.elForm.statusIcon : false;
},
validateIcon() {
return {
validating: 'el-icon-loading',
success: 'el-icon-circle-check',
error: 'el-icon-circle-close'
}[this.validateState];
},
//textarea的样式
textareaStyle() {
return merge({}, this.textareaCalcStyle, { resize: this.resize });
},
//输入框尺寸，只在 type!="textarea" 时有效
inputSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
//input是否被禁用
inputDisabled() {
return this.disabled || (this.elForm || {}).disabled;
},
//是否显示清空按钮
showClear() {
// clearable属性为true，即用户设置了显示清空按钮的属性；并且在非禁用且非只读状态下才且当前input的value不是空且该input获得焦点或者鼠标移动上去才显示
return this.clearable &&
!this.inputDisabled &&
!this.readonly &&
this.currentValue !== '' &&
(this.focused || this.hovering);
}
},
watch: {
value(val, oldValue) {
this.setCurrentValue(val);
}
},
methods: {
focus() {
(this.$refs.input || this.$refs.textarea).focus();
},
blur() {
(this.$refs.input || this.$refs.textarea).blur();
},
getMigratingConfig() {
return {
props: {
'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
'on-icon-click': 'on-icon-click is removed.'
},
events: {
'click': 'click is removed.'
}
};
},
handleBlur(event) {
this.focused = false;
this.$emit('blur', event);
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
}
},
select() {
(this.$refs.input || this.$refs.textarea).select();
},
resizeTextarea() {
if (this.$isServer) return;
//autosize自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
const { autosize, type } = this;
if (type !== 'textarea') return;
//如果没设置自适应内容高度
if (!autosize) {
this.textareaCalcStyle = { //高度取文本框的最小高度
minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
};
return;
}
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
//如果设置了minRows和maxRows需要计算文本框的高度
this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
},
handleFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
handleComposition(event) {
// 如果中文输入已完成
if (event.type === 'compositionend') {
// isOnComposition设置为false
this.isOnComposition = false;
this.currentValue = this.valueBeforeComposition;
this.valueBeforeComposition = null;
//触发input事件，因为input事件是在compositionend事件之后触发，这时输入未完成，不会将值传给父组件，所以需要再调一次input方法
this.handleInput(event);
} else { //如果中文输入未完成
const text = event.target.value;
const lastCharacter = text[text.length - 1] || '';
//isOnComposition用来判断是否在输入拼音的过程中
this.isOnComposition = !isKorean(lastCharacter);
if (this.isOnComposition && event.type === 'compositionstart') {
// 输入框中输入的值赋给valueBeforeComposition
this.valueBeforeComposition = text;
}
}
},
handleInput(event) {
const value = event.target.value;
//设置当前值
this.setCurrentValue(value);
//如果还在输入中，将不会把值传给父组件
if (this.isOnComposition) return;
//输入完成时，isOnComposition为false，将值传递给父组件
this.$emit('input', value);
},
handleChange(event) {
this.$emit('change', event.target.value);
},
setCurrentValue(value) {
// 输入中，直接返回
if (this.isOnComposition && value === this.valueBeforeComposition) return;
this.currentValue = value;
if (this.isOnComposition) return;
//输入完成,设置文本框的高度
this.$nextTick(this.resizeTextarea);
if (this.validateEvent && this.currentValue === this.value) {
this.dispatch('ElFormItem', 'el.form.change', [value]);
}
},
calcIconOffset(place) {
let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
if (!elList.length) return;
let el = null;
for (let i = 0; i < elList.length; i++) {
if (elList[i].parentNode === this.$el) {
el = elList[i];
break;
}
}
if (!el) return;
const pendantMap = {
suffix: 'append',
prefix: 'prepend'
};
const pendant = pendantMap[place];
if (this.$slots[pendant]) {
el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
} else {
el.removeAttribute('style');
}
},
updateIconOffset() {
this.calcIconOffset('prefix');
this.calcIconOffset('suffix');
},
//清空事件
clear() {
//父组件的value值变成了空，更新父组件中v-model的值
this.$emit('input', '');
//触发了父组件的change事件，父组件中就可以监听到该事件
this.$emit('change', '');
//触发了父组件的clear事件
this.$emit('clear');
//更新当前的currentValue的值
this.setCurrentValue('');
}
},
created() {
this.$on('inputSelect', this.select);
},
mounted() {
this.resizeTextarea();
this.updateIconOffset();
},
updated() {
this.$nextTick(this.updateIconOffset);
}
};
</script>
如下图所示：
（2）核心部分 input 输入框
<input
:tabindex="tabindex"
v-if="type !== 'textarea'"
class="el-input__inner"
v-bind="$attrs"
:type="type"
:disabled="inputDisabled"
:readonly="readonly"
:autocomplete="autoComplete || autocomplete"
:value="currentValue"
ref="input"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
:aria-label="label"
>1、 :tabindex="tabindex" 是控制tab键按下后的访问顺序，由用户传入tabindex；如果设置为负数则无法通过tab键访问，设置为0则是在最后访问。
2、 v-bind="$attrs" 为了简化父组件向子组件传值，props没有注册的属性，可以通过$attrs来取。
3、inputDisabled ：返回当前input是否被禁用；readonly：input的原生属性，是否是只读状态；
4、 原生方法compositionstart、compositionupdate、compositionend
compositionstart 官方解释 ： 触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词），通俗点，假如我们要输入一段中文，当我们按下第一个字母的时候触发 。
compositionupdate在我们中文开始输入到结束完成的每一次keyup触发。
compositionend则在我们完成当前中文的输入触发 。
这三个事件主要解决中文输入的响应问题，从compositionstart触发开始，意味着中文输入的开始且还没完成，所以此时我们不需要做出响应，在compositionend触发时，表示中文输入完成，这时我们可以做相应事件的处理。
handleComposition(event) {
// 如果中文输入已完成
if (event.type === 'compositionend') {
// isOnComposition设置为false
this.isOnComposition = false;
this.currentValue = this.valueBeforeComposition;
this.valueBeforeComposition = null;
//触发input事件，因为input事件是在compositionend事件之后触发，这时输入未完成，不会将值传给父组件，所以需要再调一次input方法
this.handleInput(event);
} else { //如果中文输入未完成
const text = event.target.value;
const lastCharacter = text[text.length - 1] || '';
//isOnComposition用来判断是否在输入拼音的过程中
this.isOnComposition = !isKorean(lastCharacter);
if (this.isOnComposition && event.type === 'compositionstart') {
// 输入框中输入的值赋给valueBeforeComposition
this.valueBeforeComposition = text;
}
}
},
handleInput(event) {
const value = event.target.value;
//设置当前值
this.setCurrentValue(value);
//如果还在输入中，将不会把值传给父组件
if (this.isOnComposition) return;
//输入完成时，isOnComposition为false，将值传递给父组件
this.$emit('input', value);
},（3）calcTextareaHeight.js使用来计算文本框的高度
//原理：让height等于scrollHeight，也就是滚动条卷去的高度，这里就将height变大了，然后返回该height并绑定到input的style中从而动态改变textarea的height
let hiddenTextarea;
//存储隐藏时候的css样式的
const HIDDEN_STYLE = `
height:0 !important;
visibility:hidden !important;
overflow:hidden !important;
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important
`;
//用来存储要查询的样式名
const CONTEXT_STYLE = [
'letter-spacing',
'line-height',
'padding-top',
'padding-bottom',
'font-family',
'font-weight',
'font-size',
'text-rendering',
'text-transform',
'width',
'text-indent',
'padding-left',
'padding-right',
'border-width',
'box-sizing'
];
function calculateNodeStyling(targetElement) {
// 获取目标元素计算后的样式，即实际渲染的样式
const style = window.getComputedStyle(targetElement);
// getPropertyValue方法返回指定的 CSS 属性的值；这里返回box-sizing属性的值
const boxSizing = style.getPropertyValue('box-sizing');
// padding-bottom和padding-top值之和
const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) +
parseFloat(style.getPropertyValue('padding-top'))
);
// border-bottom-width和border-top-width值之和
const borderSize = (
parseFloat(style.getPropertyValue('border-bottom-width')) +
parseFloat(style.getPropertyValue('border-top-width'))
);
// 其他属性以及对应的值
const contextStyle = CONTEXT_STYLE
.map(name => `${name}:${style.getPropertyValue(name)}`)
.join(';');
return { contextStyle, paddingSize, borderSize, boxSizing };
}
export default function calcTextareaHeight(
targetElement, //目标元素
minRows = 1, //最小行数
maxRows = null //最大行数
) {
// 创建一个隐藏的文本域
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}
//获取目标元素的样式
let {
paddingSize,
borderSize,
boxSizing,
contextStyle
} = calculateNodeStyling(targetElement);
//设置对应的样式属性
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
// 获取滚动高度
let height = hiddenTextarea.scrollHeight;
const result = {};
if (boxSizing === 'border-box') {
// 如果是 border-box，高度需加上边框
height = height + borderSize;
} else if (boxSizing === 'content-box') {
// 如果是 content-box，高度需减去上下内边距
height = height - paddingSize;
}
// 计算单行高度，先清空内容
hiddenTextarea.value = '';
// 再用滚动高度减去上下内边距
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (minRows !== null) { // 如果参数传递了 minRows
// 最少的高度=单行的高度*行数
let minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
// 如果是 border-box，还得加上上下内边距和上下边框的宽度
minHeight = minHeight + paddingSize + borderSize;
}
// 高度取二者最大值
height = Math.max(minHeight, height);
result.minHeight = `${ minHeight }px`;
}
if (maxRows !== null) {
let maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
result.height = `${ height }px`;
hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
hiddenTextarea = null;
return result;
};
参考博文：https://www.jianshu.com/p/74ba49507fe6
https://juejin.im/post/5b7d18e46fb9a01a12502616