vue 3 中实现输入框聚焦/失焦高亮需结合 @focus/@blur 事件控制状态并动态绑定 css 类，支持单个或多个互斥高亮，推荐优先使用原生 input:focus 伪类配合 transition 实现零 js 方案，兼顾可访问性与性能。
在 Vue 3 中实现输入框聚焦/失焦时的高亮切换，核心是结合 @focus 和 @blur 事件控制状态，并联动 CSS 样式或动态类名。关键不在于写多少逻辑，而在于准确响应焦点变化、避免事件遗漏、适配可访问性（如 Tab 导航）。
用 ref + 状态变量控制高亮类
适用于单个或多个独立输入框，需要区分哪个被激活：
- 在
setup()中用ref定义一个响应式状态（如isFocused = ref(false)） - 给
<input>绑定@focus="isFocused = true"和@blur="isFocused = false" - 通过
:class动态绑定高亮类：:class="{ 'focused': isFocused }" - CSS 中定义
.focused样式（推荐用transition实现平滑边框/阴影变化）
多个输入框互斥高亮（Tab 友好）
当页面有多个表单项，希望仅当前获得焦点的输入框高亮，且支持键盘 Tab 切换：
- 定义一个响应式索引
activeIndex = ref(0)，初始值可设为 -1 或首个有效项索引 - 每个
<input>的@focus设置对应序号：@focus="activeIndex = 1"、@focus="activeIndex = 2"等 - 父容器或 label 元素用
:class="{ active: activeIndex === 1 }"控制整体高亮区域 - 注意：不要只依赖
@click，@focus才能兼容键盘操作
使用原生 :focus 伪类（零 JS 方案）
如果只需视觉反馈、无需额外逻辑（如校验、动画触发），纯 CSS 更轻量可靠：
- 直接写样式：
input:focus { border-color: #007AFF; box-shadow: 0 0 5px rgba(0, 122, 255, 0.3); } - 务必加上过渡效果：
input { transition: border-color 0.3s ease, box-shadow 0.3s ease; } - 此方式自动覆盖鼠标点击、Tab 进入、JS
focus()等所有获取焦点途径，且无事件监听开销
处理自定义组件中的焦点事件（如 Element Plus）
若使用 <el-input></el-input> 等封装组件，其内部 input 不直接暴露，需加 .native 修饰符或使用 .capture：
- Vue 3 + Element Plus 推荐写法：
<el-input></el-input> - 更稳妥的方式（尤其嵌套深时）：
@blur.capture，确保事件在捕获阶段被监听 - 避免用
@blur直接绑定在组件上——它不会自动透传到内部 input
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
