vue中輸入框聚焦,自動跳轉下一個輸入框


比如

點擊入庫,el-dialog彈出來,然后自動聚焦第一個輸入框,當輸入框有值的時候,自動跳轉下一個輸入框

這個需求

直接上菜:

this.$refs.lbj.focus()其實直接這么寫也可以,但是關閉彈出,再次打開彈窗的時候,他不會聚焦,至於為啥,我也不懂,只有看大神解釋了,
這里的lbj你要ref 輸入框那里

然后去監聽,這個對象的單一屬性,開始消費碼

lbj01,就是結束消費碼的ref

搞定

然后這里解釋一下為啥要用

this.$nextTick( () =>{
this.$refs.lbj01.focus()
} )

最后去網上查找資料,發現是更新dom先后順序的問題,在vue中,並不是每次數據改變都會觸發更新dom,而是將這些操作都緩存在一個隊列,在一個事件循環結束之后,刷新隊列,統一執行dom更新操作。 

通常情況下,我們不需要關心這個問題,而如果想在DOM狀態更新后做點什么,則需要用到nextTick。在vue生命周期的created()鈎子函數進行的DOM操作要放在Vue.nextTick()的回調函數中,因為created()鈎子函數執行的時候DOM並未進行任何渲染,而此時進行DOM操作是徒勞的,所以此處一定要將DOM操作的JS代碼放進Vue.nextTick()的回調函數中。

說白了就是想要在DOM狀態更新后做什么,比如聚焦等,就要用到

nextTick,你里面才是你要聚焦的代碼
 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM