Vue Element Plus el-select 使用 filterable 搜索下 @blur 事件绑定失效

本文主要是介绍Vue Element Plus el-select 使用 filterable 搜索下 @blur 事件绑定失效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

失效原因

使用 filterable 导致 blur 事件绑定在输入框上，而不是整个选择器上

当点击选项时，输入框失去焦点触发 blur 事件

而点击其她位置收起下拉款的时候，并不会触发输入款的 blur 事件

解决方案

使用 element 提供的 visible-change 事件进行绑定

在该事件绑定的函数上添加 visible 参数

当 visible 为 true 时，表示下拉框展开

当 visible 为 false 时，表示下拉框收起

if (visible) {return;
}

使用 if (visible) return; 即可使该函数在下拉框展开时不触发，在下拉框收起时触发

      

如果被绑定的函数还需要传递其她参数，默认的 visible 就会失效，需要自行在 data 中定义一个变量对事件进行判断

这篇关于Vue Element Plus el-select 使用 filterable 搜索下 @blur 事件绑定失效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---