当前位置：首页 > VUE

vue实现键盘选择

2026-02-17 08:50:26VUE

Vue 实现键盘选择功能

在 Vue 中实现键盘选择功能通常用于列表导航、下拉菜单或表格操作。以下是几种常见实现方式：

基础键盘事件监听

通过 @keydown 监听键盘事件，结合 v-for 渲染的列表项实现选择：

<template>
  <div @keydown.down="moveDown" @keydown.up="moveUp" tabindex="0">
    <div 
      v-for="(item, index) in items" 
      :key="item.id"
      :class="{ 'active': activeIndex === index }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      activeIndex: 0
    }
  },
  methods: {
    moveDown() {
      this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1)
    },
    moveUp() {
      this.activeIndex = Math.max(this.activeIndex - 1, 0)
    }
  }
}
</script>

使用自定义指令

创建可复用的键盘选择指令：

vue实现键盘选择

Vue.directive('key-select', {
  bind(el, binding) {
    el.tabIndex = 0
    el.addEventListener('keydown', (e) => {
      const items = el.querySelectorAll('[data-selectable]')
      let current = [...items].findIndex(item => item.classList.contains('active'))

      if (e.key === 'ArrowDown') {
        current = Math.min(current + 1, items.length - 1)
        binding.value(current)
      } else if (e.key === 'ArrowUp') {
        current = Math.max(current - 1, 0)
        binding.value(current)
      }
    })
  }
})

组合式 API 实现

在 Vue 3 中使用组合式 API：

import { ref, onMounted } from 'vue'

export function useKeyboardSelection(items) {
  const selectedIndex = ref(0)

  const handleKeyDown = (e) => {
    if (e.key === 'ArrowDown') {
      selectedIndex.value = Math.min(selectedIndex.value + 1, items.value.length - 1)
    } else if (e.key === 'ArrowUp') {
      selectedIndex.value = Math.max(selectedIndex.value - 1, 0)
    }
  }

  onMounted(() => {
    window.addEventListener('keydown', handleKeyDown)
  })

  return { selectedIndex }
}

第三方库集成

对于复杂场景，可以使用专门处理键盘导航的库：

vue实现键盘选择

安装 vue-keyboard 或 hotkeys-js
```
npm install hotkeys-js
```
集成示例：
```
import hotkeys from 'hotkeys-js'
```

export default { mounted() { hotkeys('up,down', (e, handler) => { if (handler.key === 'down') this.moveDown() if (handler.key === 'up') this.moveUp() }) }, beforeDestroy() { hotkeys.unbind('up,down') } }


#### 无障碍访问增强

确保键盘导航符合 WAI-ARIA 标准：

```html
<div role="listbox" aria-activedescendant={`item-${activeIndex}`}>
  <div 
    v-for="(item, index) in items"
    :id="`item-${index}`"
    role="option"
    :aria-selected="activeIndex === index"
  >
    {{ item.text }}
  </div>
</div>

以上方法可根据具体需求组合使用，核心要点是正确监听键盘事件、管理选中状态，并确保组件可获得焦点。