如何为默认打开的v-dialog内部的v-btn设置自动聚焦

问题根因 #

• 原代码是给dialog组件本身的DOM元素触发聚焦，而非内部的目标按钮，聚焦对象错误。
• v-dialog即使初始v-model设为true，它的入场过渡、内部DOM完全挂载的时机晚于mounted+nextTick的触发时机，此时操作焦点要么找不到目标元素，要么会被dialog内置的默认焦点逻辑覆盖。

解决方法 #

用v-dialog内置的opened事件实现，该事件会在dialog完全打开、过渡动画结束后触发，是操作dialog内部元素的最稳妥时机：

1. 给需要自动聚焦的按钮添加ref标识：

<v-dialog v-model="dialogVisible" @opened="handleDialogOpened">
  <!--  dialog内部内容  -->
  <v-btn ref="targetBtn">目标按钮</v-btn>
</v-dialog>

2. 在opened事件的回调中触发按钮聚焦：

methods: {
  handleDialogOpened() {
    this.$nextTick(() => {
      this.$refs.targetBtn.$el.focus()
    })
  }
}

补充说明 #

如果你使用的是Vuetify 3 + Vue 3组合式API，只需要调整ref的获取方式即可，核心逻辑不变：

<script setup>
import { ref, nextTick } from 'vue'
const dialogVisible = ref(true)
const targetBtn = ref()

const handleDialogOpened = () => {
  nextTick(() => {
    targetBtn.value.$el.focus()
  })
}
</script>

内容的提问来源于stack exchange，提问作者Jamie