比如
點擊入庫,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,你里面才是你要聚焦的代碼