关于element-ui的blur事件失效,select的blur的bug,以及row在@blur延迟的解决

文章目录

  • 一、blur事件失效
  • 二、使用`native`与`capture`让`blur`生效
  • 三、关于row,在@blur延迟的问题

一、blur事件失效

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

二、使用nativecaptureblur生效

  • 虽然点击元素内部还是会让blur生效(点开选项隐藏选项的时候生效,但是这能够确保点击元素后,在光标出去时能够生效(而这也足够了)。
@blur.capture.native="handleBlur(row)"
  • capture是添加事件监听中的捕获
  • addEventListener(, , );

三、关于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()
	})


}

到这里就解决了。(这里主要解决的是要给选择器做数据检查,有错误时不让他离开)

你可能感兴趣的:(Vue,大前端,ES6,vue,javascript)