A caixa de entrada na caixa pop-up de diálogo vue vant recebe foco automaticamente

1. Plano de fundo: clique em Definir valor para abrir uma caixa pop-up para definir o valor, exigindo que a entrada interna ganhe foco automaticamente.

2. Usando o autofocus = "autofocus" integrado da entrada só pode obter o foco automaticamente quando a janela pop-up for chamada pela primeira vez. Ele não obterá o foco quando a janela pop-up for chamada novamente sem atualizar a página .

3. Solução: forneça a entrada autofocus="autofocus" e um atributo ref e chame o método focus() no retorno de chamada da função nextTick. Ele deve ser chamado neste.$nextTick(function () {}); retorno de chamada de função, caso contrário Um erro será relatado porque o dom não foi obtido.

4. Neste ponto, a entrada dentro da janela pop-up ganhará foco automaticamente todas as vezes.

 <common-dialog
            :showDialog="showAmount"
            :showConfirmButton="true"
            :confirmButtonText="'确定'"
            @confirm="setAmountConfirm"
        >
            <template #default>
                <input
                    autofocus="autofocus"
                    ref="getFocus"
                    type="number"
                    v-model="money"
                    class="set-amount-input"
                />
            </template>
        </common-dialog>

//设置金额弹窗
        showAmountPop() {
    
    
            this.showAmount = !this.showAmount;
            this.$nextTick(function () {
    
    
                this.$refs.getFocus.focus();
            });
        },

Este artigo foi reimpresso deste link, clique aqui