vue 实现键盘上下键 选中

在Vue.js中，实现键盘上下键选择通常是在表格组件或者列表滚动功能中常见，可以利用事件监听`keydown`事件，并结合`v-model`和索引值来控制焦点和选中项。这里是一个基本的示例：

<template>
  <div :key="index" v-for="(item, index) in items" @keydown.up.prevent="prevItem(index)" @keydown.down.prevent="nextItem(index)">
    <input type="checkbox" :checked="selectedItems.includes(item)" @click="toggleSelection(index)">
    {{ item }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 数据数组
      selectedItems: [], // 选中的项
      currentIndex: 0, // 当前聚焦的索引
    };
  },
  methods: {
    prevItem(index) {
      if (this.currentIndex > 0 && this.currentIndex !== index) {
        this.currentIndex--;
      }
    },
    nextItem(index) {
      if (this.items.length > this.currentIndex + 1 && this.currentIndex !== index) {
        this.currentIndex++;
      }
    },
    toggleSelection(index) {
      let item = this.items[index];
      if (!this.selectedItems.includes(item)) {
        this.selectedItems.push(item);
      } else {
        this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
      }
    },
  },
};
</script>

在这个例子中，当用户按下上箭头键（`keydown.up`），`prevItem`方法会使当前选中的输入框失去焦点并移动到上一个；同样，下箭头键（`keydown.down`）用于下一个。`toggleSelection`方法处理点击事件，切换选中状态。