element-ui的el-select选择器的@blur事件失效的坑
element-UI⽂档中本来el-select有个blur事件绑定函数属性。但是使⽤后发现有时候失焦事件并不能触发⽣效，也就导致所绑定的函数不能执⾏。
解决办法：
利⽤el-select的@focus⽅法，在select标签内 添加 ref 于此便可在focus事件内触发 blur事件。 代码如下：
input绑定onblur事件
<el-select
multiple
filterable
allow-create
default-first-option
v-model="request_msg"
placeholder="请选择或⾃⾏输⼊拒绝原因"
class="config-select"
@focus="onBlur('request_msg', 'reqMsgRef')"
ref="reqMsgRef"
>
<el-option
v-for="item in refuseConfig"
:key="item"
:value="item"
:label="item"
></el-option>
</el-select>
onBlur(flag, ref) {
this.$refs[ref].$refs.input.blur = () => {
// 这⾥执⾏失焦的代码
const inp = this.$refs[ref].$refs.input.value
if(!inp) return
this[flag].push(inp)
};
},
// this.$refs[ref].$refs.input 此根节点到得根节点时输⼊得input
// this.$refs.select.$ference.$refs.input 此根节点到得是最外层得 input。包含被选中的数据在内
总结
写到这⾥也结束了，在⽂章最后放上⼀个⼩⼩的福利，以下为⼩编⾃⼰在学习过程中整理出的⼀个关于 前端开发 的学习思路及⽅向。从事互联⽹开发，最主要的是要学好技术，⽽学习技术是⼀条慢长⽽艰苦的道路，不能靠⼀时激情，也不是熬⼏天⼏夜就能学好的，必须养成平时努⼒学习的习惯，更加需要准确的学习⽅向达到有效的学习效果。
由于内容较多就只放上⼀个⼤概的⼤纲，需要更及详细的学习思维导图的 。
还有免费的 ⾼级web全套视频教程 前端架构 H5 vue node ⼩程序 视频+资料+代码+⾯试题！
全⽅⾯的web前端进阶实践技术资料，并且还有技术⼤⽜⼀起讨论交流解决问题。

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