vue实现焦点切换
Vue 实现焦点切换的方法
在 Vue 中实现焦点切换通常涉及以下几种场景：表单输入框切换、动态元素焦点管理、无障碍访问优化等。以下是几种常见实现方式：
使用 ref 和 focus() 方法
通过 ref 获取 DOM 元素并调用原生 focus() 方法：
<template>
<input ref="input1" @keydown.tab="handleTab(1)" />
<input ref="input2" @keydown.tab="handleTab(2)" />
</template>
<script>
export default {
methods: {
handleTab(index) {
if (index === 1) {
this.$refs.input2.focus();
} else {
this.$refs.input1.focus();
}
}
}
}
</script>自定义指令实现自动焦点
创建全局指令实现自动聚焦或焦点切换：
// 全局指令
Vue.directive('focus', {
inserted(el) {
el.focus();
},
update(el, binding) {
if (binding.value) el.focus();
}
});
// 使用方式
<input v-focus="shouldFocus" />结合 nextTick 处理动态内容
在动态渲染内容后切换焦点：
this.showNewField = true;
this.$nextTick(() => {
this.$refs.newField.focus();
});无障碍访问的焦点管理
对于模态框等场景，需实现焦点锁定：
// 使用 trap-focus 库或自定义实现
import { trapFocus } from 'trap-focus';
export default {
mounted() {
trapFocus(this.$el);
},
beforeDestroy() {
releaseFocus(this.$el);
}
}表单组件的焦点循环
实现表单内的焦点循环切换：
handleKeydown(e) {
if (e.key === 'Tab') {
e.preventDefault();
const inputs = Array.from(this.$el.querySelectorAll('input'));
const currentIndex = inputs.indexOf(document.activeElement);
const nextIndex = (currentIndex + 1) % inputs.length;
inputs[nextIndex].focus();
}
}注意事项
- 移动端设备需测试虚拟键盘与焦点管理的兼容性
- 避免在
v-if和v-for中直接操作焦点，应配合nextTick - 复杂场景建议使用专门的焦点管理库（如
focus-trap-vue）
以上方法可根据具体需求组合使用，实现灵活可靠的焦点切换逻辑。
