关于element-ui的blur事件失效,select的blur的bug,以及row在@blur延迟的解决
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、blur事件失效
- 这个blur的生效十分有问题,很多时候都无效,偶尔点击元素内部以及选项的时候突然就生效了
<el-select @blur="handleBlur">
</el-select>
二、使用native
与capture
让blur
生效
- 虽然点击元素内部还是会让
blur
生效(点开选项隐藏选项的时候生效),但是这能够确保点击元素后,在光标出去时能够生效(而这也足够了)。
@blur.capture.native="handleBlur(row)"
capture
是添加事件监听中的捕获addEventListener(<event-name>, <callback>, <use-capture>)
;
三、关于row,在@blur延迟的问题
- 直接使用的时候,
handleBlur
每次都是获取row的上一条数据
handleBlur(row) {
if(!Named.checkAttrCodeNum(row.columnsCode.length)) this.$refs.type.focus()
}
- 于是想到了js中的
sleep
延迟,代码就变成了这样来解决
sleep(time) {
return new Promise(resolve => setTimeout(resolve, time));
},
handleBlur(row) {
this.sleep(100).then(() => {
console.log('handleBlur', row.columnsCode.length);
if(!Named.checkAttrCodeNum(row.columnsCode.length)) this.$refs.type.focus()
})
}
到这里就解决了。(这里主要解决的是要给选择器做数据检查,有错误时不让他离开)
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)