Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問題及解決
更新時(shí)間：2022年12月07日 17:10:40 作者：鋼鐵熊貓33
這篇文章主要介紹了Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問題
最近，碰到一個(gè)問題，就是輸入框旁邊有一個(gè)編輯按鈕，點(diǎn)擊時(shí)，才可以對(duì)輸入框進(jìn)行編輯：
要實(shí)現(xiàn)的效果：
為了方便輸入，需要自動(dòng)獲取焦點(diǎn)，所以加入了autofocus，但是發(fā)現(xiàn)，只有第一個(gè)并且第一次點(diǎn)擊才起作用。
查了網(wǎng)上的一些文檔，說(shuō)是跟dom的渲染順序和數(shù)據(jù)的緩存有點(diǎn)兒關(guān)系，至于深層次的原因，還沒查到。
然后使用了Vue提供的自定義指令來(lái)解決，還有一點(diǎn)兒需要注意，el-input在頁(yè)面渲染后，外層是個(gè)div，需要拿到里面的input才會(huì)有效果。
<el-input v-focus></el-input>
directives: {
// 注冊(cè)一個(gè)局部的自定義指令 v-focus
focus: {
// 指令的定義
inserted: function (el) {
// 聚焦元素
el.querySelector('input').focus()
}
}
},
還有一種解決方案，是使用 Vue.nextTick() 和 Ref去做，例子就不去寫了，都是去操作dom的。
使input和el-input自動(dòng)獲取焦點(diǎn)的處理
【普通input的自定義指令操作】：先在入口文件注冊(cè)一個(gè)全局自定義指令
// main.js
Vue.directive('focus', {
? inserted (el, binding, vnode) {
? ? // 聚焦元素
? ? el.focus()
? }
})【普通input的自定義指令使用】：v-"+指令名"
// index.vue <input v-focus placeholder="因?yàn)橛衯-focus,所以我聚焦了" />
【el-input的自定義指令操作】：先在入口文件注冊(cè)一個(gè)全局自定義指令
// main.js
Vue.directive('fo', {
? inserted (el, binding, vnode) {
? ? // 聚焦元素
? ? el.querySelector('input').focus()
? }
})【el-input的自定義指令使用】：v-"+指令名"
// index.vue <el-input v-fo placeholder="因?yàn)橛衯-fo,所以我聚焦了"></el-input>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作
這篇文章主要介紹了vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
這篇文章主要介紹了vue 按鈕 權(quán)限控制，在日常項(xiàng)目中，會(huì)碰到需要根據(jù)后臺(tái)接口返回的數(shù)據(jù)，來(lái)判斷當(dāng)前用戶的操作權(quán)限，必須當(dāng)有刪除權(quán)限時(shí)，就顯示刪除按鈕，下面我們就來(lái)了解一下具體的解決方法,需要的朋友也可以參考一下2021-12-12
這篇文章主要介紹了vue單選按鈕,選中如何改變其當(dāng)前按鈕顏色。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了解決Antd輸入框卡頓問題以及Pubsub.js的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了Vue項(xiàng)目的優(yōu)化打包，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了使用Vant完成通知欄Notify的提示操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11
element?ui?就是基于vue的一個(gè)ui框架,該框架基于vue開發(fā)了很多相關(guān)組件,方便我們快速開發(fā)頁(yè)面,餓了么前端團(tuán)隊(duì)基于vue進(jìn)行開發(fā)并且進(jìn)行了開源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過程,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12