vue3+ts中如何实现按住shift按键选中多条数据。写一段代码

在Vue 3 + TypeScript中，你可以使用事件监听和状态管理来实现按住Shift键选中多条数据的功能。以下是一个简单的示例代码：

<template>
  <div>
    <div>
      <!-- 绑定 shift 键的按下和抬起事件 -->
      <div @keydown.shift="handleShiftKeyDown" @keyup.shift="handleShiftKeyUp">
        <div v-for="item in items" :key="item.id" :class="{ selected: item.selected }">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false },
        // 添加更多条目...
      ],
      lastSelectedIndex: -1,
    };
  },
  methods: {
    handleShiftKeyDown(event: KeyboardEvent) {
      // 按下 Shift 键时，将 lastSelectedIndex 设置为当前选中的条目索引
      const selectedItem = this.items.find(item => item.selected);
      this.lastSelectedIndex = selectedItem ? this.items.indexOf(selectedItem) : -1;
    },
    handleShiftKeyUp(event: KeyboardEvent) {
      // 抬起 Shift 键时，根据 lastSelectedIndex 和当前选中的条目索引，选中范围内的条目
      const selectedIndex = this.items.findIndex(item => item.selected);
      if (selectedIndex !== -1 && this.lastSelectedIndex !== -1) {
        const start = Math.min(selectedIndex, this.lastSelectedIndex);
        const end = Math.max(selectedIndex, this.lastSelectedIndex);
        for (let i = start; i <= end; i++) {
          this.items[i].selected = true;
        }
      }
    },
  },
});
</script>

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

在上面的示例中，我们使用了`@keydown.shift`和`@keyup.shift`来监听Shift键的按下和抬起事件。当Shift键按下时，我们记录下当前选中的条目索引为`lastSelectedIndex`。当Shift键抬起时，根据`lastSelectedIndex`和当前选中的条目索引，选中范围内的条目。

注意：在示例代码中，我们使用了Vue 3的Composition API中的`defineComponent`和`reactive`函数，以及TypeScript的类型注解来定义组件和方法的类型。