vue vant dialog 弹出框中的input输入框自动获取焦点的问题

1、背景:点击设置金额弹出设置金额的弹出框,要求里面input自动获取焦点

2、使用input的自带的autofocus="autofocus"只能在第一次调起弹窗的时候自动获取焦点,不刷新页面再次调起弹窗都不会再获取焦点了

3、解决方案:给input autofocus="autofocus"以及一个ref属性,并在nextTick函数回调里面去调用focus()方法,必须在 this.$nextTick(function () {});函数回调里面调用,不然会报错,因为dom没获取到。

4、至此,每次弹窗出来里面的Input都会自动获取焦点了。

 <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();
            });
        },

在这里插入图片描述
此文转载于这个连接,点这里

猜你喜欢

转载自blog.csdn.net/qiaoqiaohong/article/details/118759815