以下是vue.js官网给出的示例
<script setup>
import { ref, onMounted } from 'vue'// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)onMounted(() => {input.value.focus()
})
</script><template><input ref="input" />
</template>
如果组件在el-dialog弹框中使用,应该改为如下写法,才能正常获取焦点
<template><input ref="input" />
</template><script setup>
import { ref, onMounted } from 'vue'// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)onMounted(() => {nextTick(() => {nextTick(() => {input.value.focus();});});
})
</script>
关键是调用2次nextTick
参考
vue3 Element Plus Dialog中的input无法获取表单焦点,需要使用两次nextTick()!!!父组件调用子组件自动获取焦点,无法实现!!!