vue3+typeScript穿梭框的實現(xiàn)示例

更新時間：2020年12月29日 10:52:52 作者：謙卑沉程

這篇文章主要介紹了vue3+typeScript穿梭框的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

實現(xiàn)功能：模仿element穿梭框的簡單功能
每周分享一個vue3+typeScript的小組件，我只想分享下自己的實現(xiàn)思路，樓主是個菜雞前端，記錄下實現(xiàn)過程，說不定對你有幫助。

效果展示

預(yù)覽地址

github地址

開發(fā)過程

思路：用兩個數(shù)組分別記錄左右框框里面的值，根據(jù)復(fù)選框選中狀態(tài)來實現(xiàn)刪除增加即可

html部分

<div class="shuttle">
  <!-- 左邊列表 -->
  <div class="shuttle-box">
    <div class="shuttle-box-title">
      <div>列表一</div>
      <div class="index-num">{{itemLeft.length}}</div>
    </div>
    <div class="shuttle-box-list">
      <div class="shuttle-box-item" v-for="(vo,inx) in itemLeft" :key="inx">
        <input type="checkbox" :value="inx" v-model="checkLeft" :disabled="vo.disabled" /> {{vo.label}}
      </div>
    </div>
  </div>
  <!-- 左右操作按鈕 -->
  <div class="shuttle-click">
    <span @click="goLeft">←</span>
    <span @click="goRight">→</span>
  </div>
  <!-- 右邊列表 -->
  <div class="shuttle-box">
    <div class="shuttle-box-title">
      <div>列表二</div>
      <div class="index-num">{{itemRight.length}}</div>
    </div>
    <div class="shuttle-box-list">
      <div class="shuttle-box-item" v-for="(vo,inx) in itemRight" :key="inx">
        <input type="checkbox" :value="inx" v-model="checkRight" :disabled="vo.disabled" /> {{vo.label}}
      </div>
    </div>
  </div>
</div>

ts部分

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

export default defineComponent({
  setup() {

    const data = reactive({
      itemLeft: [{
        label: '列表1的第一條數(shù)據(jù)',
        disabled: true,
      }, {
        label: '列表1的第二條數(shù)據(jù)',
        disabled: false,
      }],
      itemRight: [{
        label: '列表2的第一條數(shù)據(jù)',
        disabled: false,
      }, {
        label: '列表2的第二條數(shù)據(jù)',
        disabled: false,
      }],
      checkLeft: [],
      checkRight: [],
      goLeft: () => {
        //數(shù)組排序
        data.checkRight.sort(data.sortIndex);
        data.checkRight.forEach((item) => {
          //將itemRight對應(yīng)索引的數(shù)據(jù)移動到左邊去
          data.itemLeft.push(data.itemRight[item]);
          //移除
          data.itemRight.splice(item, 1);
        });
        //清空
        data.checkLeft = [];
        data.checkRight = [];
      },
      goRight: () => {
        //數(shù)組排序
        data.checkLeft.sort(data.sortIndex);
        data.checkLeft.forEach((item) => {
          //將itemLeft對應(yīng)索引的數(shù)據(jù)移動到右邊去
          data.itemRight.push(data.itemLeft[item]);
          //移除
          data.itemLeft.splice(item, 1);
        });
        //清空
        data.checkLeft = [];
        data.checkRight = [];
      },
      //checkbox是綁定的是的數(shù)組的索引，所以checkbox的點擊的順序不同的話索引的順序是不同的，這樣刪除有可能找不到會報錯，排個序從大到小刪除就可以
      //這個是排序參數(shù)
      sortIndex: (a, b) => {
        return b - a;
      }
    })
    return {
      ...toRefs(data),
    }
  }
})
</script>

css部分

.shuttle {
  width: 800px;
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  //整個穿梭框
  .shuttle-box {
    width: 300px;
    height: 500px;
    border: 1px solid #ddd;
    //標題
    .shuttle-box-title {
      background: #f5f7fa;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .index-num {
        color: #909399;
        font-size: 12px;
        font-weight: 400;
      }
    }
    //列表
    .shuttle-box-list {
      padding: 20px;
      //一個列表item
      .shuttle-box-item {
        line-height: 2.0;
      }
    }
  }
  //左右穿梭按鈕
  .shuttle-click {
    padding-top: 60px;
    cursor: pointer;
    span {
      padding: 5px 10px;
      display: inline-block;
      background: #409eff;
      color: #ffffff;
      margin: 0 5px;
      text-align: center;
    }
  }
}

到此這篇關(guān)于vue3+typeScript穿梭框的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue3+typeScript穿梭框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: