vue3使用键盘控制选中页面元素

Vue 3 可以使用`v-on`指令监听键盘事件，然后使用`ref`指令获取页面元素，并修改其`class`属性来控制选中状态。以下是一个简单的示例：

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

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

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

    // 监听键盘事件
    const handleKeyDown = (e) => {
      if (e.keyCode === 38) { // 上箭头
        selectedIndex.value = (selectedIndex.value === 0) ? items.length - 1 : selectedIndex.value - 1;
      } else if (e.keyCode === 40) { // 下箭头
        selectedIndex.value = (selectedIndex.value === items.length - 1) ? 0 : selectedIndex.value + 1;
      }
    };

    // 添加事件监听器
    window.addEventListener('keydown', handleKeyDown);

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

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

在`setup()`函数中，使用`ref`指令定义了一个`selectedIndex`变量，表示当前选中的元素索引。然后在`handleKeyDown()`函数中，根据上下箭头按键修改`selectedIndex`的值。在模板中，使用`:class`指令绑定元素的`class`属性，根据`selectedIndex`的值设置元素的选中状态。最后，在组件销毁前移除事件监听器。