vue Antd 輸入框Input自動聚焦方式
更新時間：2023年04月21日 09:37:22 作者：什么小蛋撻**
這篇文章主要介紹了vue Antd 輸入框Input自動聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue Antd 輸入框Input自動聚焦
1、從vue的實例屬性$ref去調(diào)input的focus方法使其實現(xiàn)聚焦。
<a-input type="text ref="ainput" />? <button @click="handleChange"></button>
2、點擊button自動聚焦，或其他事件需要聚焦
methods:{
? ? handleChange(){
? ? ? ? this.$nextTick(()=>{
? ? ? ? ? ? this.$refs.ainput.focus()
? ? ? ? })
? ? }
}vue中輸入框聚焦，自動跳轉(zhuǎn)下一個輸入框
需求
點擊請掃描庫位，enter鍵觸發(fā)后，跳轉(zhuǎn)到下一輸入框，然后自動聚焦另外一個輸入框上
<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(); // 自動獲取焦點
},
如圖
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE腳手架下載和配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法
vue3項目,新增彈框連續(xù)點擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法,需要的朋友可以參考下2024-08-08
以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫jsx的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
最近在學習vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
前端開發(fā)指南之vue-grid-layout的使用實例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了解決微信瀏覽器緩存站點入口文件(IIS部署Vue項目),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
Vue.js在設計上采用MVVM模式，當View視圖層發(fā)生變化時，會自動更新到ViewModel.接下來通過本文給大家分享Vue.js實現(xiàn)列表清單的操作方法，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了vue選擇下拉框動態(tài)變化表單方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了nuxt 每個頁面head標簽內(nèi)容設置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中常見循環(huán)遍歷指令的使用 v-for，包括v-for遍歷數(shù)組，v-for遍歷json對象,本文給大家介紹的非常詳細，需要的朋友可以參考下2018-04-04