Vue 实现初始焦点

在 Vue 应用的开发过程中，实现初始焦点是一个常见需求。初始焦点能让用户在页面加载完成后，直接将注意力集中到某个特定的元素上，比如输入框，从而提升用户体验。

我们可以使用 ref 来获取 DOM 元素的引用，进而设置焦点。在 Vue 组件中定义一个 ref：

<template>
  <div>
    <input v-model="inputValue" ref="inputRef" />
    <button @click="submitForm">提交</button>
  </div>
</template>

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

const inputRef = ref(null);
const inputValue = ref('');

const submitForm = () => {
  console.log('提交的值:', inputValue.value);
};

// 在组件挂载后设置焦点
import { onMounted } from 'vue';
onMounted(() => {
  inputRef.value.focus();
});
</script>

在上述代码中，ref 创建了 inputRef 来引用 input 元素。onMounted 钩子函数在组件挂载到 DOM 后执行，此时通过 inputRef.value.focus() 就能将焦点设置到输入框上。

另外，Vue 还提供了自定义指令来实现初始焦点功能，这在多个地方需要设置焦点时会更加方便。定义一个全局自定义指令：

import { createApp } from 'vue';

const app = createApp({});

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

在模板中使用该指令：

<template>
  <div>
    <input v-model="inputValue" v-focus />
    <button @click="submitForm">提交</button>
  </div>
</template>

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

const inputValue = ref('');
const submitForm = () => {
  console.log('提交的值:', inputValue.value);
};
</script>

通过自定义指令 v-focus，我们只需在需要设置初始焦点的元素上简单使用该指令，就能实现焦点的设置。

在实际应用场景中，登录页面往往希望用户能快速开始输入用户名或密码。通过实现初始焦点，当登录页面加载完成，焦点自动落在用户名输入框上，用户无需手动点击，直接输入即可，大大提高了操作效率。

在 Vue 中实现初始焦点有多种方式，开发者可以根据项目需求灵活选择，为用户打造更流畅的交互体验。