Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的有效方法
更新時(shí)間：2022年11月16日 11:26:35 作者：落葉塵楓
我們有時(shí)候會(huì)遇到要輸入框自動(dòng)獲取焦點(diǎn)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的簡(jiǎn)單方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
效果：在點(diǎn)擊Tab "Material Incoming"的時(shí)候，鼠標(biāo)光標(biāo)focus在PKG ID的input輸入框關(guān)鍵代碼是使用 this.$nextTick(()
????????this.$nextTick(() => {
? ? ? ? ????????this.$refs.pkgId.focus();
? ? ? ??})注意：僅僅使用 this.$refs.pkgId.focus(); 是不起作用的，需要點(diǎn)擊Tab Material Incoming 兩次才有效，但這并不是初衷。即：
方法A：生效
? ? tabInitialClick(tab, event) {
? ? ? this.$nextTick(() => {
? ? ? ? this.$refs.pkgId.focus();
? ? ? })
? ? },方法B：不生效
? ? tabInitialClick(tab, event) {
? ? ? this.$refs.pkgId.focus();
? ? },另外，以下方法如下，使用autofocus=“true" 也不生效，原因網(wǎng)上資料說是因?yàn)?lt;el-input> 外面還有其他組件 （我試了一個(gè)Form只有一個(gè)<el-input> 也沒生產(chǎn)。不知道為什么。。。）
<el-col :span="8"> ? ? <el-form-item label="PKG ID (S)" prop="pkgId" required> ? ? ? ? ? <el-input v-model=" IncomingMaterialForm.pkgId" ref="pkgId" autofocus="true" placeholder="Please input pkg id" clearable style="width: 300px;" /> ? ? </el-form-item> </el-col>
補(bǔ)充：vue input 獲取焦點(diǎn)并選中
onRename(row) {
this.$nextTick(() => {
document.querySelector(`#a${row.id}`).focus()
document.querySelector(`#a${row.id}`).select()
})
},通過id獲取焦點(diǎn)并選中
總結(jié)
到此這篇關(guān)于Vue Input輸入框自動(dòng)獲得焦點(diǎn)的文章就介紹到這了,更多相關(guān)Vue Input輸入框自動(dòng)獲得焦點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue組件通信的方式，這是在面試中一個(gè)非常高頻的問題。其實(shí)Vue組件的通信方式除了props和?$emit還有很多，本文將對(duì)vue組件通信方式進(jìn)行一下總結(jié)，感興趣的可以學(xué)習(xí)一下2021-12-12
這篇文章主要介紹了Iview Table組件中各種組件擴(kuò)展的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue路由模式中的hash和history模式詳細(xì)介紹
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求中，并且不會(huì)重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話，會(huì)報(bào)404錯(cuò)誤，所以使用history模式的話我們需要和后端進(jìn)行配合2022-09-09
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
使用idea創(chuàng)建第一個(gè)Vue項(xiàng)目
最近在學(xué)習(xí)vue，本文主要介紹了使用idea創(chuàng)建第一個(gè)Vue項(xiàng)目，文中根據(jù)圖文介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue如何動(dòng)態(tài)修改$router參數(shù)
這篇文章主要介紹了vue如何動(dòng)態(tài)修改$router參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue封裝全局過濾器Filters的步驟，通過封裝vue全局過濾器實(shí)現(xiàn)filters的統(tǒng)一管理。感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12