elment-ui的el-select选择器blur事件失效 bug解决

问题：

使用了element UI 中 el-select 组件开发项目当中发现当配置了 filterable 属性之后， @blur 事件便失效，但你肯定不知道他也不是完全失效，当你点击外面得框线时他还是会生效得！只不过有区域限制，但正因如此，相当于完全没用！

<el-selectv-model="value"ref="fuzzySearch"multiplesize="medium"placeholder="请选择文章标签"filterableautomatic-dropdown@focus="focusSelectValue"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select>

解决方案如下：

方案一：
在select标签内添加 ref
focus事件是会生效了，于此便可在focus事件内触发 blur事件。代码如下：

focusSelectValue() {console.log(this.$refs.fuzzySearch);this.$refs.fuzzySearch.$refs.input.blur = () => {console.log(0);};},

如果有需要添加得操作，写到console.log(0)的代码区域内即可。到此问题已解决！

附加解析如下：

this.$refs.fuzzySearch.$refs.input
此根节点找到得根节点时输入得input

this.$refs.select.$refs.reference.$refs.input
此根节点找到得是最外层得 input。包含被选中的数据在内。

如果还有其他得操作，也可通过ref 按需找到自己需操作得节点！

方案二（评论区的同学提供，具体是否有效没有测试）0：
通过 @blur.native.capture即可

elment-ui的el-select选择器blur事件失效 bug解决相关推荐

关于element-ui的blur事件失效，select的blur的bug，以及row在@blur延迟的解决
文章目录一.blur事件失效二.使用`native`与`capture`让`blur`生效三.关于row,在@blur延迟的问题一.blur事件失效这个blur的生效十分有问题,很多时候都无 ...
mysql中事件失效如何解决
重启Mysql服务可能会导致event_scheduler关闭,事件失效.解决方法如下: 1.解决办法: #查看是否开启 show variables like 'event_scheduler';# ...
element UI中的select选择器的change方法需要传递多个值
如上图是element UI的一个基本的select选择器根据element UI的官网事件调用,有一下几种: 如果直接调用上述事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参 ...
使用JavaScript动态添加HTML语句后，事件失效的解决办法
一.问题分析当我们使用js语法向页面中添加html语句时,经常会出现添加的html语句中绑定的事件无法执行,这是因为当js,css加载后才添加的html语句,这样在js事件加载时去找绑定的选择器(i ...
iOS Safari 中click点击事件失效的解决办法
转载自:https://www.cnblogs.com/Steping/p/5737547.html 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效 ...
DropDownList中SelectedIndexChanged事件失效的解决方法
在DropDownList控件中设置 AutoPostBack="true" 增加回传到服务器就OK了-- 转载于:https://www.cnblogs.com/New-worl ...
中控考勤机使用 zkemkeeper SDK订阅考勤数据事件失效解决方式
问题前同事编写的对中控考勤机数据集成项目当中,打卡数据不能实时进行上传到平台当中,一直靠定时全量上传来同步数据. 阅读代码后,发现代码中有实时上传数据的逻辑,但是运行一段时间后,中控zkemkeep ...
iView UI Select 选择器下拉列表跟随滚动条移动
iView UI Select 选择器下拉列表跟随滚动条移动这里记录一个BUG,关于iView UI Select 选择器下拉列表跟随滚动条移动. 此文章是本人记录BUG以及BUG的解决方法,希 ...
jQuery_01_选择器_事件
简介: jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 手册说明: 认识jQuery: jQuery的字面意思其实就是JavaScript ...

elment-ui的el-select选择器blur事件失效 bug解决

附加解析如下：

elment-ui的el-select选择器blur事件失效 bug解决相关推荐

最新文章

热门文章