技術標籤：vueTypeScript

效果

通過腳手架建立專案（@vue/cli 4.5.11）

vue create 專案名
配置需要注意
選擇Ts（空格選中）
選擇vue3.x
然後一路回車

到這了就完成vue3+ts配置

需要用到ant-vue需要安裝，注意安裝2.x版本，安裝官網直接安裝是1.x版本

安裝
npm install [email protected] --save

如果安裝錯誤版本就解除安裝重灌

解除安裝
npm uninstall ant-design-vue

配置ant
在main.ts引入

import { createApp } from 'vue'
 

import App from './App.vue'
import Antd from 'ant-design-vue';  //+
import 'ant-design-vue/dist/antd.css'; //+ 
//插入 .use(Antd)
createApp(App).use(Antd).mount('#app')

穿梭框的實現思路：
首先在temlate寫左右兩列，兩個按鈕
通過改變左右兩列的資料，vue自動響應式地改變對應內容，然後通過按鈕觸發即可。
通過shuttle 函式實現過濾選中和未選擇，分別賦予左右列，併合並原來的內容。
注意，由於改變了原來的資料，所以要先處理好先後順序，否則會由於原資料被改而後續操作出現問題。

完整App.vue原始碼如下

<template>
  <div class="content">
    <a-card style="width: 300px" title="左側">
      <ul>
        <li v-for="item in leftData" :key="item.title">
          <input type="checkbox" v-model="item.isCheck"
 
 />
          <label>{{ item.title }}</label>
        </li>
      </ul>
    </a-card>

    <div class="btn-group">
      <button @click="shuttle(0)">→</button>
      <button @click="shuttle(1)">←</button>
    </div>

    <a-card style="width: 300px" title="右側">
      <ul>
        <li v-for="item in rightData" :key="item.title">
          <input type="checkbox" v-model="item.isCheck" />
          <label>{{ item.title }}</label>
        </li>
      </ul>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "App",
  components: {},
  setup() {
    const state = reactive({
      leftData: [
        {
          title: "furfur-jiang-left",
          isCheck: true,
        },
        {
          title: "fur-left",
          isCheck: true,
        },
        {
          title: "furfur-left",
          isCheck: false,
        },
        {
          title: "furfurJiang-left",
          isCheck: false,
        },
      ],
      rightData: [
        {
          title: "furfur-jiang-right",
          isCheck: true,
        },
      ],
    });

    const shuttle = (flag: number) => {
      if (flag === 0) {
        state.rightData = [
          ...state.rightData,
          ...state.leftData.filter((item) => item.isCheck),
        ];
        state.leftData = state.leftData.filter((item) => !item.isCheck);
      }else{
        state.leftData = [
          ...state.leftData,
          ...state.rightData.filter((item) => item.isCheck),
        ];
        state.rightData = state.rightData.filter((item) => !item.isCheck);
      }
    };
    return {
      ...toRefs(state),
      shuttle,
    };
  },
});
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}
.btn-group {
  display: flex;
  flex-direction: column;
  margin: 15px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>

github地址