element-ui表单源码解析之el-input
关于表单校验el-input做的主要⼯作就是跟el-form-item交互，把input的相关事件发送给el-form-item，上⼀篇已经讲到在el-form-item 的mounted的⽣命周期⾥⾯有如下代码的
this.$on('el.form.blur', FieldBlur);
this.$on('el.form.change', FieldChange);
复制代码
我们在el-input⾥⾯依然可以看到inject，鉴于有很多单独使⽤el-input的地⽅，所以也给了默认值。
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
复制代码
看看computed####
其实这⾥⾯的⽐较简单，基本都是控制状态和样式的，有些状态是由el-form或者el-form-item控制的。
watch####
直接监听⽗级传⼊的value，根据value来设置组件内保存的currentValue。
看看 methods
focus() {
(this.$refs.input || this.$area).focus();
},
blur() {
(this.$refs.input || this.$area).blur();
},
select() {
(this.$refs.input || this.$area).select();
blur事件
},
handleFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
handleBlur(event) {
this.focused = false;
this.$emit('blur', event);
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
}
},
handleInput(event) {
const value = event.target.value;
this.setCurrentValue(value);
if (this.isOnComposition) return;
this.$emit('input', value);
},
handleChange(event) {
this.$emit('change', event.target.value);
},
handleComposition(event) {
if (pe === 'compositionend') {
this.isOnComposition = false;
this.currentValue = this.valueBeforeComposition;
this.valueBeforeComposition = null;
this.handleInput(event);
} else {
const text = event.target.value;
const lastCharacter = text[text.length - 1] || '';
this.isOnComposition = !isKorean(lastCharacter);
if (this.isOnComposition && pe === 'compositionstart') {
this.valueBeforeComposition = text;
}
}
},
复制代码
属性validateEvent默认是true， 调⽤dispatch向上发送事件，如果存在⽗组件el-form-item的话，就能直接$emit对应的事件了。
在此，element-ui的表单校验系列就讲完了。
顺便提⼀下compositionstart，compositionupdate，compositionend事件。 以⼀个业务场景举例吧：
⽐如表单⾥还可以输⼊两个字符，但我输⼊中⽂⽤的是拼⾳，要完成最后两个汉字的输⼊，需要按很多个字母键，但每⼀键都会因为input事件⽽截取value，导致最后两个汉字不能输⼊。
解决办法，使⽤composition来处理，有compositionstart和compositionend事件。
当我们打汉字的时候，是属于⾮直接输⼊的，这个时候应当是我们按下空格键或者选择某个汉字词后才算真正的输⼊，使⽤compositionend事件后取到的值来进⾏长度判断。
compositionstart事件在⽤户开始进⾏⾮直接输⼊的时候出触发，在⾮直接输⼊结束，也就是在⽤户点候选词或者点击选定按钮之后，会出发compositionend事件。
el-input处于compositionstart或者compositionupdate事件进⾏中会⽤了isOnComposition来标记下，具体是根据最后⼀个字符来判断
的this.isOnComposition = !isKorean(lastCharacter);，如果是compositionstart还会⽤valueBeforeComposition先存储input⾥⾯输⼊的值。原⽂地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。