快速解決element的autofocus失效問題
原因:
autofocus是vue中input的原生屬性,element也支持這種方法,
但是element中的el-input組件外面還有其他組件, 導致autofocus失效, 只能手動調(diào)用focus方法來聚集。
方法:
綁定ref
<el-input ref="myNameId" v-model="form.name" />
this.$refs.myNameId.focus();
動態(tài)綁定ref
<el-input :ref=" 'input'+ form.id " v-model="form.name" /> this.$nextTick(()=>{ let id = 'input'+this.form.id; this.$refs[id].focus(); })
補充知識:element input輸入框自動獲取焦點
最近項目中在做表單的時候,需要自動滾動到評論框,并且讓評論框自動聚焦,這就需要手動觸發(fā)輸入框的 focus 狀態(tài)。
但是,element并不支持autofocus屬性,那就只能通過原生的js效果獲取聚焦效果了
document.getElementById("input").focus();
或者利用vue的ref屬性也可以實現(xiàn)聚焦效果:
原理其實很簡單,Element 已經(jīng)提供了 focus 方法,但是文檔并沒有寫明如何去調(diào)用,下面是在el-input標簽上加入ref屬性,然后在需要的地方直接調(diào)用方法就可以了
<el-input v-model="input" placeholder="請輸入內(nèi)容" ref="input"></el-input>
this.$nextTick(() => { this.$refs.input.focus() })
注意:一個頁面只能有一個聚焦效果
last , vue也支持自定義指令
當頁面加載時,該元素將獲得焦點 (注意:autofocus 在移動版 Safari 上不工作)。事實上,只要你在打開這個頁面后還沒點擊過任何內(nèi)容,這個輸入框就應當還是處于聚焦狀態(tài)。現(xiàn)在讓我們用指令來實現(xiàn)這個功能:
// 注冊一個全局自定義指令 `v-focus` Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() // element-ui el.children[0].focus() // 元素有變化,如show或者父元素變化可以加延時或判斷 setTimeout(_ => { el.children[0].focus() }) } })
以上這篇快速解決element的autofocus失效問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js實現(xiàn)簡單動態(tài)數(shù)據(jù)處理
本篇文章主要介紹了Vue.js實現(xiàn)簡單動態(tài)數(shù)據(jù)處理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價值,感興趣的可以了解一下2024-05-05vue輪播圖插件vue-awesome-swiper的使用代碼實例
本篇文章主要介紹了vue輪播圖插件vue-awesome-swiper的使用代碼實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07