場景：

點(diǎn)擊button按鈕展示輸入框，并自動獲取對話框焦點(diǎn)，失去焦點(diǎn)時展示button按鈕

實(shí)現(xiàn)：

1.點(diǎn)擊button按鈕展示輸入框,失去焦點(diǎn)時展示button按鈕

• 在data中定義visibility，確定輸入框的展示狀態(tài)，默認(rèn)為false
• 定義changeVisibility方法，并給button綁定點(diǎn)擊事件@click="changeVisibility"，實(shí)現(xiàn)點(diǎn)擊按鈕展示輸入框，給輸入框綁定失去焦點(diǎn)事件@blur="changeVisibility"
• 定義input和button元素，綁定條件渲染指令v-if，當(dāng)visibility為false時展示按鈕，反之展示輸入框

代碼實(shí)現(xiàn)：

<template>
	<div>
        <label for="input">
            <input type="text" ref="inputRef" v-if="visibility" @blur="changeVisibility">
            <button @click="changeVisibility" v-else>展示文本框</button>
    	</label>
    </div>
</template>
<script>
	export default {
        data() {
            return {
                visibility: false
            }
        },
        methods: {
            changeVisibility() {
                this.visibility = !this.visibility // 切換 visibility，控制輸入框的顯示狀態(tài)
            }
        }
    }
</script>

2.自動獲取對話框焦點(diǎn)

文本框的焦點(diǎn)可以通過.focus()獲取，因此我們可以通過this.$refs.inputRef.focus()獲取到顯示的輸入框的焦點(diǎn)(inputRef是創(chuàng)建文本框時添加的ref引用)。但是方法定義在組件渲染之前，因此直接在方法中添加會導(dǎo)致控制臺報(bào)錯:Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'focus')"。這是由于瀏覽器執(zhí)行到this.$refs.inputRef.focus()

時，input元素還沒有被渲染到頁面上，此時DOM中還不存在指定的input元素。為了避免這種情況，可以使用以下三種方法推遲焦點(diǎn)的獲取

• 設(shè)置定時器, 推遲焦點(diǎn)的獲取

setTimeout(()=> {
    this.$refs.inputRef.focus()
},0)

設(shè)置一個0ms的定時器，當(dāng)瀏覽器執(zhí)行到定時器時，會將定時器內(nèi)部的函數(shù)放入延遲隊(duì)列中，當(dāng)定時器的等待事件結(jié)束后，會將函數(shù)放入消息隊(duì)列的末尾，消息隊(duì)列的執(zhí)行按照先進(jìn)先出原則，當(dāng)前面的任務(wù)執(zhí)行完成后，瀏覽器會自動執(zhí)行this.$refs.inputRef.focus()實(shí)現(xiàn)焦點(diǎn)的獲取

• 使用 $nextTick 方法, 將獲取焦點(diǎn)推遲到下一個 DOM 更新周期

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

組件的$nextTick(cb)方法，會把 cb 回調(diào)推遲到下一個 DOM 更新周期之后執(zhí)行。

通俗的理解是：等組件的 DOM 更新完成之后，再執(zhí)行 cb 回調(diào)函數(shù)。從而能保證 cb 回調(diào)函數(shù)可以操作到最新的 DOM 元素。

將獲取焦點(diǎn)放到updated生命周期中執(zhí)行（不推薦）
使用這個方法時，需要加上if判斷，否則每一次this.visibility發(fā)生變化時，都會執(zhí)行一次更新，增加服務(wù)器的負(fù)擔(dān)

updated() {
    if (this.visibility){
        this.$refs.inputRef.focus()
    }
}

當(dāng)組件處于updated時，頁面已經(jīng)根據(jù)最新的數(shù)據(jù)渲染完成了，此時我們執(zhí)行this.$refs.inputRef.focus()就可以正常獲取輸入框的焦點(diǎn)

到此這篇關(guān)于Vue輸入框狀態(tài)切換&自動獲取輸入框焦點(diǎn)の實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue動獲取輸入框焦點(diǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論