// 1、给弹窗组件内的 input 框添加 ref
<el-dialog v-model="state.dialogVisible">
<el-input ref="qrCodeInputRef"/>
</el-dialog>
// 2、引入 ref 和 nextTick
import { reactive, ref, nextTick } from 'vue';
// 3、定义变量
const state = reactive({
dialogVisible: false,
})
const qrCodeInputRef = ref();
// 4、嵌套两层nextTick(在需要获取焦点的方法内:比如说弹窗展开的方法,父组件调用子组件方法,展开弹窗)
const openDialog = () => {
state.dialogVisible = true
nextTick(() => {
nextTick(() => {
qrCodeInputRef.value.focus();
});
});
}
最关键的一点:使用两次 nextTick !!
161

被折叠的 条评论
为什么被折叠?



