vue点击按钮 使input textarea等输入框自动聚焦

经常要用到，干脆就整理一下咯。
第一种方法：
从vue 的实例属性$ref去调input的focus方法使其实现聚焦。

<template>
 <div class="box">
   <input type="text" ref="ipt">
   <br>
   <button @click="btn">点击使input聚焦</button>
 </div>
</template>
<script >
export default{
  data(){
    return{}
  },
  created(){},
  methods:{
    btn(){
      this.$refs.ipt.focus()
    }
  }
}
</script>

当点击聚焦按钮时，使其上面的input 框实现聚焦。
第二种方法：
利用vue的自定义指令与指令v-focus进行监听实现。

<template>
 <div class="box">
   <input type="text" ref="ipt" v-focus="statefocus" @blur="b">
   <br>
   <button @click="btn">点击使input聚焦</button>
 </div>
</template>
<script >
export default{
  data(){
    return{statefocus:false}
  },
  methods:{
    btn(){
      this.statefocus = true;
    },
    b(){
      this.statefocus = false;
    }
  },
  directives:{
    Focus:{
      update:function(el,{value}){
          if(value){ // if(true)就聚焦
          el.focus();
          } 
      }
    }
  }
}
</script>

当点击按钮状态为true就会聚焦。失焦时把状态重置为false。
运行结果：

嗯。。。。到这里就结束了。两种方法喜欢哪种用哪种了。
感觉有不错的，给个关注支持咯，下次更新更多知识。

------努力努力再努力。