element-ui表单源码解析之el-input
element-ui表单源码解析之el-input
关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里面有如下代码的
this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);
我们在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.$refs.textarea).focus();
},
blur() {
(this.$refs.input || this.$refs.textarea).blur();
},
select() {
(this.$refs.input || this.$refs.textarea).select();
},
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 (event.type === '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 && event.type === '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里面输入的值。
- 分类:
- Web前端
相关文章
vue发送请求是应该在mounted还是在created生命周期
一个经常会被问到的问题: 为什么不在 created 里去发ajax? created 可是比 mounted 更早调用啊,更早调用意味着更早返回结果,那样性能不是更高? 首先,一 阅读更多…
用个数组来理解vue的diff算法(一)
原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…
前端框架vue+wordpress做后端
目前正在利用闲暇时捯饬一下自己的博客,毕竟这么久没有维护了,wordpress是可以用restful API来获取数据的,决定前端用vue实现,目前正在尝试中,今天做了其中很小的一部分,就是博客目录 阅读更多…
2021年的一点工作总结(一)迁移React技术栈
2021年全年的工作总结起来很简单,算是做苦力的一年吧。。。 2021年春节后就开始邮件项目从Vue迁移到React的工作以及富文本编辑器由wangEditor替换成CKEditor。 其实自己 阅读更多…
vue内置组件keep-alive源码解析
很简单,我们直接看vue的源码即可。 keep-alive 组件支持三个属性。 props: { include: patternTypes, exclude: patter 阅读更多…
命令式组件Message、Dialog的主流写法分析
这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…