vue中监听input框获取焦点，失去焦点的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LJFPHP/article/details/83545958

一、背景

      博主之前在用vue的获取焦点，失去焦点的时候，出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候，突然@blur和@focus又好用了。emmmm，看来这部分值得一战。

二、首先是正宗的监听事件的写法

1、html代码

//这是html的输入框。定义了一个获取焦点，失去焦点的方法
 <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >

2、JS部分

   // 失去焦点和得到焦点的验证方法，name为要验证的字段名,type为blur或focus
    animateWidth(name, type) {
      if (name == "company_name") {
        if (type == "blur") {
          this.companyName.animate = false;
        } else {
          this.companyName.animate = true;
          return;
        }
        if (this.companyName.companyName.trim().length == 0) {
            this.companyName.valid = false;
            this.companyName.message = "请输入企业名称";
            return false;
        }else{
             this.companyName.valid = true;
            return true;
        }  
      } 
    },

这个方法算是通用的方法，大家在html里面根据自己的需求传不同的值即可。

三、为什么上次监听焦点事件失败呢

1、不好用的原因

博主又去看最初自己用@blur和@focus失败的代码，发现：

  <i-input class="wallet-password-1" size="large"  v-model="counts" refs = "counts" placeholder="0" type="number">
                </i-input>

      上次用的html部分是借用i-view框架的，也就是说，我们在使用vue的一些方法的时候，可能会和ui框架定义的方法冲突。这部分参考博客：
https://segmentfault.com/q/1010000011021884

      了解原因之后，我们就知道了，使用vue自带的@blur和@focus是没问题的，如果在你的代码中不起作用，那只能证明一件事，那就是你的UI框架自己定义的有获取焦点失去焦点的方法。建议大家使用UI框架之前，先去官方文档看看，这样会好很多。

2、新增指令的方法

      之前百度的时候，看到很多人都说可以通过新增指令来自定义获取焦点失去焦点的方法，具体的可以参考博客：
https://blog.csdn.net/weixin_42011096/article/details/80764182

出现这个问题，说到底还是自己对vue不熟练造成的，姑且记录一下吧。

end