vue实现默认焦点

Vue 实现默认焦点的方法

在 Vue 中实现默认焦点可以通过多种方式完成，以下是几种常见的方法：

使用 autofocus 属性

在 HTML5 中，可以使用 autofocus 属性让元素在页面加载时自动获得焦点。Vue 模板中可以直接使用该属性：

<input autofocus />

需要注意的是，autofocus 属性在某些情况下可能不生效，特别是在动态渲染的组件中。

使用 ref 和 focus() 方法

通过 Vue 的 ref 属性和 JavaScript 的 focus() 方法，可以在组件挂载后手动设置焦点：

<template>
  <input ref="inputRef" />
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus();
  }
}
</script>

这种方法适用于大多数场景，特别是在动态渲染的组件中。

使用自定义指令

可以创建一个自定义指令来简化焦点管理：

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
}
</script>

自定义指令可以复用，适合在多个组件中需要默认焦点的场景。

使用 Vue 3 的 v-model 和 ref

在 Vue 3 中，可以使用 ref 和 onMounted 来实现：

<template>
  <input ref="inputRef" />
</template>

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

const inputRef = ref(null);

onMounted(() => {
  inputRef.value.focus();
});
</script>

这种方法利用了 Vue 3 的组合式 API，代码更加简洁。

使用第三方库

如果需要更复杂的焦点管理，可以考虑使用第三方库，如 vue-focus 或 vue-directive-focus。这些库提供了更多高级功能，如焦点陷阱、焦点顺序管理等。

注意事项

• 确保元素在 DOM 中已经渲染完成后再调用 focus() 方法。
• 在某些浏览器中，autofocus 属性可能不会在动态内容中生效。
• 如果元素被隐藏或禁用，focus() 方法将不会生效。

以上方法可以根据具体需求选择使用，通常推荐使用 ref 和 focus() 的组合，因为它提供了最大的灵活性和兼容性。