Vue3 Composition API下渲染时为独立图标按钮组件设置tab focus

问题根源 #

直接给<icon-button>加ref无效，是因为父组件的ref指向的是组件实例，而非内部的原生按钮DOM元素，无法直接调用focus()方法。

解决方案 #

方案1：修改子组件，暴露Focus能力（推荐） #

在IconButton子组件内部，封装原生按钮的focus逻辑并暴露给父组件：

<!-- IconButton.vue -->
<template>
  <button 
    ref="buttonRef" 
    <!-- 组件原有属性、样式 -->
  >
    <!-- 图标、tooltip等内部内容 -->
  </button>
</template>

<script setup>
import { ref } from 'vue'

const buttonRef = ref(null)

// 封装focus方法，支持可选参数
const focus = (options) => {
  buttonRef.value?.focus(options)
}

// 把方法暴露给父组件
defineExpose({
  focus
})
</script>

父组件中，通过ref获取子组件实例，在组件渲染完成后调用focus()：

<template>
  <icon-button
    ref="editButton"
    name="edit"
    :tooltip="$t('Change Profile Picture')"
    @click="openEmployeeProfileModal"
    size="small"
    data-test="profile-modal-trigger"
    class="prof-photo-edit-icon"
    v-if="hasEditPermission"
  />
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'

const editButton = ref(null)
const hasEditPermission = ref(true) // 你的权限状态变量

onMounted(async () => {
  // 因为有v-if，必须等待组件实际渲染到DOM后再操作
  await nextTick()
  // 可选传入{ preventScroll: true }避免页面滚动
  editButton.value?.focus({ preventScroll: true })
})

// 如果权限是动态变化的，监听状态变化后再设置焦点
watch(hasEditPermission, async (isAllowed) => {
  if (isAllowed) {
    await nextTick()
    editButton.value?.focus()
  }
})
</script>

方案2：不修改子组件，直接访问DOM元素（不推荐，耦合子组件结构） #

如果子组件的根元素就是原生按钮，可以直接通过组件实例的$el访问DOM元素：

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const editButton = ref(null)

onMounted(async () => {
  await nextTick()
  editButton.value?.$el.focus()
})
</script>

注意：此方法依赖子组件的DOM结构，若后续子组件根元素变更，代码会失效，仅适合临时场景。

核心注意事项 #

• 由于使用了v-if条件渲染，必须等待组件实际挂载到DOM后再调用focus，nextTick能确保DOM更新完成。
• 调用focus时的preventScroll参数可根据需求选择，避免页面自动滚动到按钮位置。

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