vue实现焦点切换
实现焦点切换的基本方法
在Vue中实现焦点切换可以通过v-model和ref结合原生DOM操作完成。通过监听键盘事件（如Tab或方向键）或自定义逻辑，动态切换焦点到下一个元素。
<template>
<div>
<input
v-for="(item, index) in inputs"
:key="index"
:ref="'input' + index"
v-model="item.value"
@keydown.tab.prevent="handleTab(index)"
/>
</div>
</template>
<script>
export default {
data() {
return {
inputs: [{ value: '' }, { value: '' }, { value: '' }]
};
},
methods: {
handleTab(currentIndex) {
const nextIndex = (currentIndex + 1) % this.inputs.length;
this.$refs['input' + nextIndex][0].focus();
}
}
};
</script>使用自定义指令封装焦点逻辑
通过Vue自定义指令可以复用焦点管理逻辑，避免重复代码。指令可以绑定到任意元素，并在特定条件下触发焦点切换。
Vue.directive('focus-next', {
inserted(el, binding) {
el.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
e.preventDefault();
const nextEl = document.querySelector(binding.value);
nextEl && nextEl.focus();
}
});
}
});使用方式：
<input v-focus-next="'.next-input'" />
<input class="next-input" />结合Vuex管理焦点状态
在复杂场景中，可通过Vuex集中管理焦点状态，实现跨组件焦点控制。定义全局状态和mutations来跟踪当前焦点元素。
// store.js
export default new Vuex.Store({
state: {
focusedId: null
},
mutations: {
setFocus(state, id) {
state.focusedId = id;
}
}
});组件内通过watch响应状态变化：
watch: {
'$store.state.focusedId'(newVal) {
if (newVal === this.elementId) {
this.$refs.input.focus();
}
}
}无障碍访问增强
对于屏幕阅读器等辅助设备，需要添加ARIA属性确保焦点切换的可访问性。结合aria-activedescendant实现虚拟焦点管理。
<div role="listbox" :aria-activedescendant="activeId">
<div
v-for="item in items"
:id="'option-' + item.id"
role="option"
@click="setActive(item.id)"
>
{{ item.text }}
</div>
</div>第三方库集成
对于复杂交互场景，可使用vue-focus等专门库简化实现。这些库提供声明式API和高级功能如焦点陷阱（focus trap）。
安装：
npm install vue-focus使用示例：
import { focus } from 'vue-focus';
export default {
directives: { focus },
template: `<input v-focus="shouldFocus">`
};
