【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题
目录
【问题描述】
【问题摘要】
【分析问题】
【完整Test代码】
【封装自定义指令】
↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~
【问题描述】
一位朋友遇到这么一个开发场景：在表格里面嵌入el-select组件，每次修改值后，失去焦点时将修改值提交后台保存，但是发现在el-select组件失去焦点时，blur事件的evt.target.value值总为前一次选择的值；
【问题摘要】
1、el-select组件失去焦点时需要获取组件当前值而不是上一次的值；
2、el-select组件切换选项时不提交后台，只有当组件失去焦点后才提交当前值；
【分析问题】
一刚开始以为是下拉框收起动画延时问题导致内部value值被延时修改，所以就在blur事件里延时获取evt.target.value,貌似没问题了
blurHandler(evt){
setTimeout(() => {
console.log(evt.target.value);
},250)
},
随后又发现通过@blur绑定事件只会触发一次，好吧那就加修饰符吧：@blur.capture.native，好像解决只触发一次的问题了
但是随之而来的问题就是，每次切换取值后都会触发一次blur事件，这可不是我们想要的，这不变成change事件了吗？继续深挖！
那就打印一下this.$refs.select看看吧，找到this.$refs.select.$data, 看里面有定义啥变量没,发现了如下变量：
log(eventName){
let {
createdSelected,
inputHovering,
isOnComposition,
isSilentBlur,
menuVisibleOnFocus,
softFocus,
visible
} = this.$refs.select.$data;
console.table([
{
name: eventName,
value: '',
},
// {
// name: 'createdSelected',
// value: createdSelected
// },
{
name: 'inputHovering',
value: inputHovering
},
// {
// name: 'isOnComposition',
// value: isOnComposition
// },
{
name: 'isSilentBlur',
value: isSilentBlur
},
// {
// name: 'menuVisibleOnFocus',
// value: menuVisibleOnFocus
// },
// {
// name: 'softFocus',
// value: softFocus
// },
{
name: 'visible',
value: visible
},
])
}
通过反复测试发现只有inputHovering，isSilentBlur，visible这三个变量与el-select组件的focus,blur事件有关联：
通过上图可以发现，只有最下方的失去焦点事件才是我们想要的，此时visible==false，isSilentBlur==true,正好满足我们的判断条件,于是blur事件改造成这样了：
nativeBlurHandler(evt){
console.log('nativeBlurHandler', {...this.$refs.select});
let {
isSilentBlur,
visible
} = this.$refs.select;
if( isSilentBlur && !visible ) {
console.log('提交', this.$refs.select.selected.currentValue);
}
this.log('blur事件');
},
又因为value取值从evt.target.value获取的不是实时的，也就是值不正确，继续深挖，发现this.$refs.select.selected.currentValue就是我们想要的正确的值，于是乎，问题就解决了！测试demo完整代码如下：
【完整Test代码】
【封装自定义指令】
想到给组件添加ref实际并不是那么好用且麻烦，所以我又将其封装成了指令，指令代码及用法如下，大家随取随用哈↓↓↓↓↓↓