vue中，頁面上的input框自動獲取焦點及二次獲取焦點問題

需求：點擊button按鈕，錄入成功后，頁面上的input框自動聚焦，快速進行下一次錄入，提高效率

開始嘗試了幾種方法都沒有成功

一、首先想到的用vue指令 v-focus，然而沒有成功

 <Input 
       v-model="book.isbnOrIssn" 
       @change.native="_getIsbn" 
       @blur="_getIsbn" 
       :disabled="snDisabled" 
        v-focus
        placeholder="請掃描或輸入ISBN/ISSN">
 </Input>

 directives: {
            focus: {
                inserted (el,{value}) {
                    if(value){
                        el.focus()
                    }
                }
            }
        },

 

二、操作頁面dom節點，首先用到ref，然而還是沒有任何作用

<Input 
       v-model="book.isbnOrIssn" 
       @change.native="_getIsbn" 
       @blur="_getIsbn" 
       :disabled="snDisabled" 
        ref="gain"
        placeholder="請掃描或輸入ISBN/ISSN">
 </Input>

this.$refs.gain.focus()

 

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

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

 

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

 

還有一種就是彈窗的問題，

打開彈框第一次能自動獲取焦點（加了autofocus的緣故，但只有第一次進入才起作用），

 

然而關閉彈窗再次進入，光標並沒有再次聚焦，還是可以利用 $nextTick，設置100毫秒的延時執行即可

 

<el-input 
 v-model="ghStats.authCode" 
 ref="gain"
 @keyup.enter="onSubmit" 
 autofocus="autofocus" >
</el-input>

　　

this.$nextTick(() => {
        this.$refs.gain.focus()
      },100)