vue element ui input 自动获取焦点（解决autofocus只有第一次起作用问题，）

Posted 2021-09-07 qqcc

原因：
autofocus是vue中input的原生属性,element也支持这种方法,
但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。

解决方案：
借助动态绑定ref属性，在this.$nextTick调用focus()方法。

<div id="app">
<div v-for="(item,i) in data">

{{item.id}}.{{item.text}}
<el-input v-show="item.edit"
  type="text"
  placeholder="请输入内容"
  v-model="item.text"
 :ref="\'input\'+ item.id "
>
</el-input>
 <button @click="edit(item)">编辑</button>

<div>
</div>

//js部分
var Main = {
data() {

return {
  data:[
    {
      id:1,
      edit:false,
      text:"22"
    },
     {
      id:2,
      edit:false,
      text:"33"
    }
  ]
}

},
methods:{

edit(item){
  this.data.map((item1)=>{
    if(item1.id==item.id){
      item1.edit=!item1.edit;
      this.$nextTick(()=>{  //主要代码
      let id = \'input\'+item.id;
      this.$refs[id][0].focus();
     })
    }
  })
}

}
}
var Ctor = Vue.extend(Main) //如果在vue-cli里就不用写
new Ctor().$mount(\'#app\')//如果在vue-cli里就不用写
补充问题：
1.关于打印this.$refs 有的情况是组件实例 有的时候是数组

这是vue的特性,自动把v-for里面的ref展开成数组的形式.

假设你的ref不是动态的,而是静态的 ， ref="a"，

那么不管你执行多少次循环,最后ref只会有一个值,

所以vue为了处理这种情况会把v-for里ref

转为数组形式，为了能捕捉所有的ref值.

Vue本身提供了自定义指令的方法

// 注册一个全局自定义指令 v-focus
Vue.directive(\'focus\', function (el) {

el.focus()

})
这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点
但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素
所以我们要在<el-input>被绑定为v-focus的同时
在自定义指令中获取组件下通过querySelector()方法获取input元素

<el-input
v-model.trim="searchFor"
@blur="blurSearchFor"
v-focus="blurFocus">
</el-input>
Vue.directive(\'focus\', function (el) {
el.querySelector(\'input\').focus()
})

Vue本身提供了自定义指令的方法2

使用Vue提供的自定义指令来解决，还有一点儿需要注意，el-input在页面渲染后，外层是个div，需要拿到里面的input才会有效果。

<el-input v-focus></el-input>

directives: {
// 注册一个局部的自定义指令 v-focus
focus: {

// 指令的定义
inserted: function (el) {
  // 聚焦元素
  el.querySelector(\'input\').focus()
}

}
},