以下是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()!!!父組件調用子組件自動獲取焦點,無法實現!!!