快速解決element的autofocus失效問題

更新時(shí)間：2020年09月08日 11:37:54 作者：一月清輝

這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

原因：

autofocus是vue中input的原生屬性,element也支持這種方法,

但是element中的el-input組件外面還有其他組件, 導(dǎo)致autofocus失效, 只能手動(dòng)調(diào)用focus方法來聚集。

方法：

綁定ref

<el-input ref="myNameId" v-model="form.name" />

this.$refs.myNameId.focus();

動(dòng)態(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();
})

補(bǔ)充知識(shí)：element input輸入框自動(dòng)獲取焦點(diǎn)

最近項(xiàng)目中在做表單的時(shí)候，需要自動(dòng)滾動(dòng)到評(píng)論框，并且讓評(píng)論框自動(dòng)聚焦，這就需要手動(dòng)觸發(fā)輸入框的 focus 狀態(tài)。

但是，element并不支持autofocus屬性，那就只能通過原生的js效果獲取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref屬性也可以實(shí)現(xiàn)聚焦效果：

原理其實(shí)很簡(jiǎn)單，Element 已經(jīng)提供了 focus 方法，但是文檔并沒有寫明如何去調(diào)用,下面是在el-input標(biāo)簽上加入ref屬性，然后在需要的地方直接調(diào)用方法就可以了

<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" ref="input"></el-input>

this.$nextTick(() => {
  this.$refs.input.focus()
 })

注意：一個(gè)頁面只能有一個(gè)聚焦效果

last , vue也支持自定義指令

當(dāng)頁面加載時(shí)，該元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)。事實(shí)上，只要你在打開這個(gè)頁面后還沒點(diǎn)擊過任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)。現(xiàn)在讓我們用指令來實(shí)現(xiàn)這個(gè)功能：

// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
 // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 // element-ui
 el.children[0].focus()
 // 元素有變化，如show或者父元素變化可以加延時(shí)或判斷
 setTimeout(_ => {
  el.children[0].focus()
 })
 }
})

以上這篇快速解決element的autofocus失效問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: