欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問(wèn)題及解決

 更新時(shí)間：2022年12月07日 17:10:40   作者：鋼鐵熊貓33  
這篇文章主要介紹了Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問(wèn)題

最近，碰到一個(gè)問(wèn)題，就是輸入框旁邊有一個(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)系，至于深層次的原因，還沒(méi)查到。

然后使用了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)文章

最新評(píng)論