关于前端:vue-element-ui-input-自动获取焦点解决autofocus只有第一次起作用问题

51次阅读

共计 1502 个字符,预计需要花费 4 分钟才能阅读完成。

起因:
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()}

}
},

正文完
 0