vue实现键盘选择
Vue 实现键盘选择功能
在 Vue 中实现键盘选择功能通常涉及监听键盘事件，并根据按键操作更新组件状态。以下是几种常见实现方式：
基础键盘事件监听
通过 @keydown 或 @keyup 指令监听键盘事件：
<template>
<div @keydown.up="handleUp" @keydown.down="handleDown" tabindex="0">
<!-- 可选项列表 -->
</div>
</template>
<script>
export default {
methods: {
handleUp() {
// 上箭头键逻辑
},
handleDown() {
// 下箭头键逻辑
}
}
}
</script>使用自定义指令
创建可复用的键盘选择指令：
Vue.directive('key-select', {
bind(el, binding) {
el.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') binding.value('up')
if (e.key === 'ArrowDown') binding.value('down')
if (e.key === 'Enter') binding.value('enter')
})
}
})列表项高亮选择
实现列表键盘导航时常见模式：
<template>
<ul @keydown="handleKey" tabindex="0">
<li v-for="(item, index) in items"
:class="{ active: index === selectedIndex }">
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
selectedIndex: 0,
items: ['选项1', '选项2', '选项3']
}
},
methods: {
handleKey(e) {
if (e.key === 'ArrowDown') {
this.selectedIndex = Math.min(this.selectedIndex + 1, this.items.length - 1)
}
if (e.key === 'ArrowUp') {
this.selectedIndex = Math.max(this.selectedIndex - 1, 0)
}
}
}
}
</script>组合键支持
处理组合键操作（如Ctrl+Enter）：
handleKey(e) {
if (e.key === 'Enter' && e.ctrlKey) {
// 执行组合键操作
}
}第三方库集成
使用专门处理键盘操作的库如 vue-shortkey：
import VueShortkey from 'vue-shortkey'
Vue.use(VueShortkey)
// 使用示例
<button v-shortkey="['arrowup']" @shortkey="handleUp">上</button>无障碍访问考虑
确保键盘导航符合无障碍标准：
- 为可聚焦元素添加
tabindex - 提供视觉焦点状态
- 支持屏幕阅读器
性能优化
对于长列表的键盘选择：
- 使用虚拟滚动
- 节流键盘事件处理
- 避免频繁的DOM操作
以上方法可根据具体需求组合使用，构建完整的键盘交互体验。
