Vue实现Input自动聚焦方法

本文详解如何通过 Vue 自定义指令 `v-focus` 实现 input 元素的自动聚焦，相比传统 ref + mounted 方式更解耦、可复用且契合 Vue 的声明式设计哲学；不仅支持基础自动聚焦，还覆盖条件聚焦、SSR 兼容、延迟执行、Modal 动画后聚焦等真实开发场景，让焦点控制变得简洁、可靠、开箱即用。

在 Vue 应用中，让某个 <input> 元素在组件挂载后自动获得焦点，只需一个自定义指令就能干净、复用、无副作用地实现。

为什么不用 ref + mounted？

虽然用 ref 获取 DOM 并调用 .focus() 能工作，但它把逻辑耦合在组件内部，每次都需要重复写；而自定义指令将“聚焦行为”封装成声明式能力，像内置指令 v-model 一样直接写在模板里，更符合 Vue 的设计哲学。

创建 v-focus 自定义指令（Vue 3 Composition API）

在项目任意位置（如 src/directives/focus.js）定义：

export const vFocus = {
  mounted(el) {
    el.focus()
  }
}

然后在 main.js 中全局注册：

import { createApp } from 'vue'
import { vFocus } from './directives/focus'
import App from './App.vue'

const app = createApp(App)
app.directive('focus', vFocus)
app.mount('#app')

在模板中使用 v-focus

直接加在需要自动聚焦的输入框上即可：

<template>
  &lt;input v-focus type=&quot;text&quot; placeholder=&quot;页面一打开就在这里输入&quot; /&gt;
</template>

支持条件聚焦（比如只在首次进入时聚焦）：

• 加个布尔值参数：v-focus="shouldFocus"，并在指令中判断
• 配合 v-if 控制元素是否渲染，避免聚焦到已销毁的 DOM
• 若 input 是异步加载或由 v-show 控制显隐，需改用 updated 钩子并加防抖

进阶：支持 autofocus 失效场景（如 SSR 或动态表单）

原生 autofocus 在服务端渲染或某些 UI 框架中可能不生效。自定义指令能确保在客户端真实 DOM 就绪后执行：

• 指令的 mounted 钩子保证 DOM 已插入文档流
• 对 Modal 内的 input，可配合 nextTick 确保动画完成后再聚焦
• 需要延迟聚焦（例如等待键盘弹出），可用 setTimeout 包裹 el.focus()

本篇关于《Vue实现Input自动聚焦方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！