vue中的input框點(diǎn)擊后不聚焦問題怎么解決

今天小編給大家分享一下vue中的input框點(diǎn)擊后不聚焦問題怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

input框點(diǎn)擊后不聚焦問題

廢話不多說直接上代碼

哪個(gè)地方要寫input框  就直接把這一部分代碼放上   里面雙向綁定的值和事件換上自己定義的  

 <div class="item" @click.stop.prevent="inputPaentClick('input1')">
        <input
          ref="input1"
          placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
          v-model="value"
          @keydown.enter="searchs"
        />
      </div>

在方法里寫上這些

  inputPaentClick(refName) {undefined
      //解決input框雙擊才可以聚焦問題
      this.$nextTick(() => {undefined
        this.$refs[refName] && this.$refs[refName].focus();
      });
    }

只復(fù)制這些就行 input里綁定的事件以及要實(shí)現(xiàn)的方法 寫在這個(gè)事件同級(jí)的地方   

vue input聚焦的坑

點(diǎn)擊按鈕，使某個(gè)input框聚焦

1、給 input 加個(gè) ref 屬性，寫個(gè) button 按鈕并加個(gè)點(diǎn)擊事件

<input type="text" ref="input">
<button @click="onFocus"></button>

2、onFocus方法：

onFocus() {
    this.$refs.input.focus()
  }

加載頁面時(shí)自動(dòng)聚焦

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

【坑】

如果input框是隱藏的，點(diǎn)擊某個(gè)元素讓input框顯示，同時(shí)聚焦，這個(gè)時(shí)候聚焦效果就不會(huì)實(shí)現(xiàn)。

解決辦法：

點(diǎn)擊元素的時(shí)候用個(gè)變量做標(biāo)識(shí)，然后再watch里面去監(jiān)聽這個(gè)變量，通過判斷這個(gè)變量的值來聚焦，

可以寫在setTimeout里面，或者寫在nextTick里面即可解決問題；代碼如下

watch: {
    isClick(){
      if(this.isClick == false) {
        setTimeout(() => {
          this.$refs.input.focus()
        }, 100);
        // this.$nextTick(() => {
        //   this.$refs.input.focus()
        // });
      }
    }
  }

以上就是“vue中的input框點(diǎn)擊后不聚焦問題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。