vue自定义v-focus指令通过封装el.focus()实现声明式自动聚焦，支持全局注册、条件控制、nexttick/timeout时机优化及局部使用，比ref+mounted更简洁解耦。

用 Vue 自定义指令实现自动聚焦，核心就是封装 el.focus() 这一原生操作，让它变成可复用、声明式、解耦的模板能力。比起在每个组件里写 ref + mounted，指令更干净，也更符合 Vue 的设计逻辑。

基础版：全局 v-focus 指令

适合全项目通用场景，比如登录页、搜索框默认聚焦。

• 在 main.js 中注册：

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

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

app.mount('#app')

• 模板中直接使用：<input v-focus type="text" placeholder="一打开就可输入">
• 注意：Vue 会自动把 v-focus 映射到 'focus' 这个注册名，大小写不敏感但推荐小写

带条件控制的 v-focus

不是所有时候都要聚焦，比如表单校验失败才聚焦错误字段，或只在首次进入时生效。

php版微信js-sdk支付接口类

php版微信js-sdk支付接口类

下载

• 传入布尔值作为绑定值：<input v-focus="shouldFocus">
• 指令内判断：mounted(el, binding) { if (binding.value) el.focus() }
• 配合 v-if 使用时更安全——避免聚焦已销毁的 DOM；若用 v-show，建议改用 updated 钩子并加防抖

适配特殊场景的增强写法

原生 autofocus 在 SSR、Modal 动画、键盘弹出等场景下容易失效，自定义指令能精准控制时机。

• Modal 内聚焦：在 mounted 里用 nextTick 确保动画完成后再调用 focus
• 移动端键盘延迟：加 setTimeout(el.focus, 300) 给系统留出渲染和键盘准备时间
• SSR 兼容：指令钩子只在客户端执行，天然规避服务端报错

局部指令（按需使用）

如果只在某个组件里用，不想污染全局，可在 <script setup></script> 中定义：

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

然后模板中照常写 v-focus 即可，无需注册，作用域清晰。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！