vue实现焦点切换
实现焦点切换的方法
在Vue中实现焦点切换通常涉及以下几个方面：使用ref获取DOM元素、监听键盘事件、调用focus()方法。以下是几种常见场景的实现方式：
通过ref和focus()手动切换焦点
在模板中使用ref标记需要切换焦点的元素，通过方法触发焦点切换：
<template>
<input ref="input1" v-model="text1" />
<input ref="input2" v-model="text2" />
<button @click="switchFocus">切换焦点</button>
</template>
<script>
export default {
methods: {
switchFocus() {
this.$refs.input2.focus();
}
}
}
</script>监听键盘事件实现焦点切换
通过监听keydown事件（如Tab键或方向键），动态切换焦点：
<template>
<input
v-for="(item, index) in inputs"
:key="index"
:ref="'input' + index"
@keydown.tab.prevent="handleTab(index)"
/>
</template>
<script>
export default {
data() {
return {
inputs: [1, 2, 3]
};
},
methods: {
handleTab(currentIndex) {
const nextIndex = (currentIndex + 1) % this.inputs.length;
this.$refs['input' + nextIndex][0].focus();
}
}
}
</script>使用自定义指令实现自动焦点
创建全局指令实现自动焦点管理：
// main.js
Vue.directive('focus', {
inserted(el) {
el.focus();
},
update(el, binding) {
if (binding.value) el.focus();
}
});模板中使用方式：
<input v-focus="shouldFocus" />表单中的焦点顺序管理
结合tabindex属性控制焦点顺序：
<template>
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</template>通过动态修改tabindex实现条件化焦点顺序：
this.$refs.input.tabIndex = isDisabled ? -1 : 1;注意事项
- 在Vue 3中，
$refs需要通过ref()函数声明，且不再自动展开数组。 - 移动端可能需要额外处理触摸事件。
- 对于动态渲染的列表，建议使用
nextTick确保DOM更新完成后再操作焦点。
以上方法可根据实际场景组合使用，例如结合键盘事件与ref实现复杂的表单焦点逻辑。
