当前位置：首页 > VUE

vue实现键盘选择

2026-03-29 08:20:29VUE

监听键盘事件

在Vue中实现键盘选择功能，可以通过@keydown或@keyup事件监听键盘输入。需要在模板中为元素添加事件监听，或在mounted钩子中使用addEventListener。

<template>
  <div @keydown="handleKeyDown" tabindex="0">
    <!-- 可聚焦元素内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      if (event.key === 'ArrowUp') {
        // 上箭头逻辑
      } else if (event.key === 'ArrowDown') {
        // 下箭头逻辑
      }
    }
  }
}
</script>

维护选中状态

使用Vue的响应式数据来维护当前选中的项。通常结合v-for渲染列表，并通过CSS类动态高亮选中项。

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="index"
      :class="{ 'active': index === selectedIndex }"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      selectedIndex: 0
    }
  }
}
</script>

处理导航逻辑

在键盘事件中更新selectedIndex，并确保选中项在可视范围内。对于列表溢出情况，可结合滚动操作。

handleKeyDown(event) {
  if (event.key === 'ArrowUp') {
    this.selectedIndex = Math.max(0, this.selectedIndex - 1);
  } else if (event.key === 'ArrowDown') {
    this.selectedIndex = Math.min(this.items.length - 1, this.selectedIndex + 1);
  }
  this.scrollToSelected();
},
scrollToSelected() {
  const element = this.$el.querySelector('.active');
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }
}

支持多方向导航

扩展键盘支持，包括Home/End键快速跳转，以及字母键快速匹配等高级功能。

handleKeyDown(event) {
  if (event.key === 'Home') {
    this.selectedIndex = 0;
  } else if (event.key === 'End') {
    this.selectedIndex = this.items.length - 1;
  }
  // 字母键匹配逻辑
  if (/^[a-z]$/i.test(event.key)) {
    const foundIndex = this.items.findIndex(item => 
      item.toLowerCase().startsWith(event.key.toLowerCase())
    );
    if (foundIndex >= 0) this.selectedIndex = foundIndex;
  }
}

无障碍支持

确保组件符合WCAG标准，为屏幕阅读器提供适当的ARIA属性。

vue实现键盘选择

<ul role="listbox">
  <li
    v-for="(item, index) in items"
    role="option"
    :aria-selected="index === selectedIndex"
    :tabindex="index === selectedIndex ? 0 : -1"
  >
    {{ item }}
  </li>
</ul>