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的模板語法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧2023-10-10
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項(xiàng)目開發(fā),客戶覺得地圖上的文字標(biāo)注太多了,要求地圖上只顯示省市等主要城市的標(biāo)注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中，我們會(huì)遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11
今天小編就為大家分享一篇axios 封裝上傳文件的請求方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造
這篇文章主要介紹了vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造,home.vue 組件有了兩個(gè)屬性：navs 和 tts 屬性，具體實(shí)例代碼大家跟隨小編一起通過本文學(xué)習(xí)吧2018-09-09
本文通過實(shí)例代碼給大家介紹了Vue axios配置,非常不錯(cuò)，代碼簡單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
分享12個(gè)Vue開發(fā)中的性能優(yōu)化小技巧(實(shí)用!)
一般來說,你不需要太關(guān)心vue的運(yùn)行時(shí)性能,它在運(yùn)行時(shí)非?？?但付出的代價(jià)是初始化時(shí)相對較慢,下面這篇文章主要給大家分享介紹了十二個(gè)Vue開發(fā)中的性能優(yōu)化小技巧,需要的朋友可以參考下2022-02-02
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10