Element UI輸入框focus()方法自動(dòng)獲取焦點(diǎn)失敗處理方法
? 本來(lái)想通過(guò)自定義事件觸發(fā)輸入框，并獲取焦點(diǎn)，但是使用官方提示的focus()方法一直失效
后來(lái)百度了半天，終于找到一個(gè)比較好的處理方法。
? 
先放對(duì)比代碼：
- 剛開(kāi)始的代碼
<el-input
v-if="isFormOpened"
v-model="scope.row.name"
@blur="updateLib">
</el-input>
<el-button
type="primary"
@click="openUpdateForm">
</el-button>
//觸發(fā)方法
openUpdateForm(){
this.isFormOpened = true
this.$refs.inputRef.focus()
},
- 后來(lái)修改后的代碼
<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>
//觸發(fā)方法
openUpdateForm(){
this.isFormOpened = true
setTimeout(()=>{
this.$refs.inputRef.focus()
},0)
},
完美解決
總結(jié)：
百度查了半天，終于找到了原因
-
問(wèn)題原因：渲染組件需要時(shí)間，并且時(shí)間沒(méi)有JS執(zhí)行的快；所以獲取不到
-
解決辦法：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-430462.html
- 第一種利用setTimeout ,也就是我上面使用的方法
setTimeout(()=>{ this.$refs.input1.focus(); },0)- 第二種：利用 this.$nextTick （Dom更新完畢再執(zhí)行回調(diào)函數(shù)）
this.$nextTick(()=>{ this.$refs.input1.focus(); })
PS：轉(zhuǎn)載請(qǐng)標(biāo)明出處！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-430462.html
到了這里，關(guān)于Element UI輸入框focus()方法自動(dòng)獲取焦點(diǎn)失敗處理方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[vue+element-ui] form中輸入框無(wú)法輸入問(wèn)題的解決方法](https://imgs.yssmx.com/Uploads/2024/02/782003-1.png)
