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

更新時(shí)間：2023年04月21日 09:37:22 作者：什么小蛋撻**

這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)擊請掃描庫位，enter鍵觸發(fā)后，跳轉(zhuǎn)到下一輸入框，然后自動(dòng)聚焦另外一個(gè)輸入框上

在這里插入圖片描述

 <el-input
        v-model="posName"  clearable size="small" placeholder="請掃描庫位" style="width: 200px"
        class="filter-item"  @keyup.enter.native="jumpInput"
      />
  <el-input
        ref="barcodeMsg" v-model="barcode" clearable size="small"  placeholder="請掃描物料信息"
        style="width: 400px"  class="filter-item" @keyup.enter.native="getSearch('material')"
      />

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

如圖

在這里插入圖片描述

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE腳手架的下載和配置步驟詳解
這篇文章主要介紹了VUE腳手架下載和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-08-08
一文徹底教會你在vue中寫jsx
以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫jsx的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vuejs路由的傳參及路由props配置詳解
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
前端開發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目)
這篇文章主要介紹了解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
Vue.js實(shí)現(xiàn)列表清單的操作方法
Vue.js在設(shè)計(jì)上采用MVVM模式，當(dāng)View視圖層發(fā)生變化時(shí)，會自動(dòng)更新到ViewModel.接下來通過本文給大家分享Vue.js實(shí)現(xiàn)列表清單的操作方法，需要的朋友參考下吧
2017-11-11
vue選擇下拉框動(dòng)態(tài)變化表單方式
這篇文章主要介紹了vue選擇下拉框動(dòng)態(tài)變化表單方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
nuxt 每個(gè)頁面head標(biāo)簽內(nèi)容設(shè)置方式
這篇文章主要介紹了nuxt 每個(gè)頁面head標(biāo)簽內(nèi)容設(shè)置方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
淺析vue中常見循環(huán)遍歷指令的使用 v-for
這篇文章主要介紹了vue中常見循環(huán)遍歷指令的使用 v-for，包括v-for遍歷數(shù)組，v-for遍歷json對象,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-04-04