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

在方法里寫上這些

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

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

vue input聚焦的坑

點擊按鈕，使某個input框聚焦

1、給 input 加個 ref 屬性，寫個 button 按鈕并加個點擊事件

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

2、onFocus方法：

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

加載頁面時自動聚焦

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

【坑】

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

解決辦法：

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

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

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: