vue3如何实现键盘上下左右选择页面元素

Vue 3 中可以使用`v-for`指令和`ref`指令获取页面元素，然后在键盘事件处理函数中修改元素的选中状态。以下是一个简单的示例：

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

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const items = ['item1', 'item2', 'item3'];
    const selectedIndex = ref(0);
    const itemRefs = ref([]);

    // 监听键盘事件
    const handleKeyDown = (e) => {
      if (e.keyCode === 37) { // 左箭头
        selectedIndex.value = (selectedIndex.value === 0) ? items.length - 1 : selectedIndex.value - 1;
      } else if (e.keyCode === 38) { // 上箭头
        selectedIndex.value = (selectedIndex.value === 0) ? items.length - 1 : selectedIndex.value - 1;
      } else if (e.keyCode === 39) { // 右箭头
        selectedIndex.value = (selectedIndex.value === items.length - 1) ? 0 : selectedIndex.value + 1;
      } else if (e.keyCode === 40) { // 下箭头
        selectedIndex.value = (selectedIndex.value === items.length - 1) ? 0 : selectedIndex.value + 1;
      }
      // 获取选中元素的ref并调用scrollIntoView方法将其滚动到可见区域
      itemRefs.value[selectedIndex.value].scrollIntoView({ block: 'nearest' });
    };

    // 添加事件监听器
    watchEffect(() => {
      window.addEventListener('keydown', handleKeyDown);
    });

    // 在组件销毁前移除事件监听器
    const onDestroyed = () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
    return { items, selectedIndex, itemRefs, onDestroyed };
  },
  beforeUnmount() {
    this.onDestroyed();
  }
};
</script>

<style>
.active {
  background-color: yellow;
}
</style>

和上一个示例类似，在`setup()`函数中，使用`ref`指令定义了一个`selectedIndex`变量，表示当前选中的元素索引，同时使用`ref`指令获取了所有元素的`ref`。在`handleKeyDown()`函数中，根据上下左右箭头按键修改`selectedIndex`的值，并获取选中元素的`ref`并调用`scrollIntoView`方法将其滚动到可见区域。在模板中，使用`:class`指令绑定元素的`class`属性，根据`selectedIndex`的值设置元素的选中状态。最后，在组件销毁前移除事件监听器。