vue vant dialog 弹出框中的input输入框自动获取焦点的问题
1、背景:点击设置金额弹出设置金额的弹出框,要求里面input自动获取焦点2、使用input的自带的autofocus="autofocus"只能在第一次调起弹窗的时候自动获取焦点,不刷新页面再次调起弹窗都不会再获取焦点了3、解决方案:给input autofocus="autofocus"以及一个ref属性,并在nextTick函数回调里面去调用focus()方法,必须在 this.$nextT
·
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();
});
},
更多推荐
已为社区贡献2条内容
所有评论(0)