vue?Antd輸入框Input自動(dòng)聚焦的方法是什么

今天小編給大家分享一下vue Antd輸入框Input自動(dòng)聚焦的方法是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

vue Antd 輸入框Input自動(dòng)聚焦

1、從vue的實(shí)例屬性$ref去調(diào)input的focus方法使其實(shí)現(xiàn)聚焦。

<a-input type="text ref="ainput" /> 
<button @click="handleChange"></button>

2、點(diǎn)擊button自動(dòng)聚焦，或其他事件需要聚焦

methods:{
    handleChange(){
        this.$nextTick(()=>{
            this.$refs.ainput.focus()
        })
    }
}

vue中輸入框聚焦，自動(dòng)跳轉(zhuǎn)下一個(gè)輸入框

需求 

點(diǎn)擊請(qǐng)掃描庫(kù)位，enter鍵觸發(fā)后，跳轉(zhuǎn)到下一輸入框，然后自動(dòng)聚焦另外一個(gè)輸入框上

 <el-input
        v-model="posName"  clearable size="small" placeholder="請(qǐng)掃描庫(kù)位" 
        class="filter-item"  @keyup.enter.native="jumpInput"
      />
  <el-input
        ref="barcodeMsg" v-model="barcode" clearable size="small"  placeholder="請(qǐng)掃描物料信息"
          class="filter-item" @keyup.enter.native="getSearch('material')"
      />

 // enter鍵觸發(fā)
    jumpInput() {
      this.$refs.barcodeMsg.focus(); // 自動(dòng)獲取焦點(diǎn)
    },

如圖

以上就是“vue Antd輸入框Input自動(dòng)聚焦的方法是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。