Element UI输入框focus()方法自动获取焦点失败处理方法
本来想通过自定义事件触发输入框,并获取焦点,但是使用官方提示的focus()方法一直失效
后来百度了半天,终于找到一个比较好的处理方法。
先放对比代码:
- 刚开始的代码
<el-input
v-if="isFormOpened"
v-model="scope.row.name"
@blur="updateLib">
</el-input>
<el-button
type="primary"
@click="openUpdateForm">
</el-button>
//触发方法
openUpdateForm(){
this.isFormOpened = true
this.$refs.inputRef.focus()
},
- 后来修改后的代码
<el-input
v-if="isFormOpened"
v-model="scope.row.name"
ref="inputRef"
@blur="updateLib(scope.row.id,scope.row.name)">
</el-input>
<el-button
type="primary"
@click="openUpdateForm(scope.row.name)">
</el-button>
//触发方法
openUpdateForm(){
this.isFormOpened = true
setTimeout(()=>{
this.$refs.inputRef.focus()
},0)
},
完美解决
总结:
百度查了半天,终于找到了原因
-
问题原因:渲染组件需要时间,并且时间没有JS执行的快;所以获取不到
-
解决办法:文章来源:https://www.toymoban.com/news/detail-430462.html
- 第一种利用setTimeout ,也就是我上面使用的方法
setTimeout(()=>{ this.$refs.input1.focus(); },0)
- 第二种:利用 this.$nextTick (Dom更新完毕再执行回调函数)
this.$nextTick(()=>{ this.$refs.input1.focus(); })
PS:转载请标明出处!文章来源地址https://www.toymoban.com/news/detail-430462.html
到了这里,关于Element UI输入框focus()方法自动获取焦点失败处理方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!