vue3 typescript 实现穿梭框

Vue 3和TypeScript结合使用可以实现一个穿梭框（Transfer）组件。下面是一个简单的示例代码：

<template>
  <div>
    <h2>穿梭框</h2>
    <div class="transfer">
      <div class="transfer-items">
        <h3>可选项</h3>
        <ul>
          <li v-for="item in availableItems" :key="item.id" @click="moveToSelected(item)">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="transfer-controls">
        <button @click="moveToAvailable" :disabled="selectedItems.length === 0">&lt;</button>
        <button @click="moveToSelected" :disabled="availableItems.length === 0">&gt;</button>
      </div>
      <div class="transfer-items">
        <h3>已选项</h3>
        <ul>
          <li v-for="item in selectedItems" :key="item.id" @click="moveToAvailable(item)">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

interface Item {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'Transfer',
  setup() {
    const availableItems: Item[] = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      { id: 4, name: 'Item 4' },
      { id: 5, name: 'Item 5' },
    ];

    const selectedItems = ref<Item[]>([]);

    const moveToSelected = (item: Item) => {
      availableItems.splice(availableItems.indexOf(item), 1);
      selectedItems.value.push(item);
    };

    const moveToAvailable = (item?: Item) => {
      if (item) {
        selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
        availableItems.push(item);
      } else {
        while (selectedItems.value.length > 0) {
          const itemToMove = selectedItems.value.pop();
          if (itemToMove) {
            availableItems.push(itemToMove);
          }
        }
      }
    };

    return {
      availableItems,
      selectedItems,
      moveToSelected,
      moveToAvailable,
    };
  },
});
</script>

<style scoped>
.transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.transfer-items {
  flex: 1;
}

.transfer-items ul {
  list-style-type: none;
  padding: 0;
}

.transfer-items li {
  cursor: pointer;
}

.transfer-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.transfer-controls button {
  margin-bottom: 10px;
}
</style>

这个示例代码中，使用了Vue的`defineComponent`函数和TypeScript的类型定义来创建穿梭框组件。组件包含两个区域，分别显示可选项和已选项。点击可选项列表中的项，可以将该项移动到已选项列表中，点击已选项列表中的项，可以将该项移动回可选项列表中。移动操作是通过修改数据来实现的。

注意：这只是一个简单的示例，实际项目中可能还需要添加其他功能和样式。