一、blur事件失效

  • 这个blur的生效十分有问题,很多时候都无效,偶尔点击元素内部以及选项的时候突然就生效了
<el-select @blur="handleBlur">
</el-select>

二、使用nativecaptureblur生效

  • 虽然点击元素内部还是会让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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐