Element UI输入框focus()方法自动获取焦点失败处理方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI输入框focus()方法自动获取焦点失败处理方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Element UI输入框focus()方法自动获取焦点失败处理方法

本来想通过自定义事件触发输入框，并获取焦点，但是使用官方提示的focus()方法一直失效

后来百度了半天，终于找到一个比较好的处理方法。

Element UI输入框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)
        },

完美解决
Element UI输入框focus()方法自动获取焦点失败处理方法

总结：

百度查了半天，终于找到了原因

问题原因：渲染组件需要时间，并且时间没有JS执行的快；所以获取不到
解决办法：
- 第一种利用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模板网！