关于javascript:vue3typeScript-穿梭框每周一个小组件

每周一个小组件

前言

实现性能：模拟 element 穿梭框的简略性能
每周分享一个 vue3+typeScript 的小组件，我只想分享下本人的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮忙。

成果展现

预览地址

github 地址

开发过程

思路：用两个数组别离记录左右框框外面的值，依据复选框选中状态来实现删除减少即可

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 的第一条数据',
                disabled: true,
            }, {
                label: '列表 1 的第二条数据',
                disabled: false,
            }],
            itemRight: [{
                label: '列表 2 的第一条数据',
                disabled: false,
            }, {
                label: '列表 2 的第二条数据',
                disabled: false,
            }],
            checkLeft: [],
            checkRight: [],
            goLeft: () => {
                // 数组排序
                data.checkRight.sort(data.sortIndex);
                data.checkRight.forEach((item) => {
                    // 将 itemRight 对应索引的数据挪动到右边去
                    data.itemLeft.push(data.itemRight[item]);
                    // 移除
                    data.itemRight.splice(item, 1);
                });
                // 清空
                data.checkLeft = [];
                data.checkRight = [];},
            goRight: () => {
                // 数组排序
                data.checkLeft.sort(data.sortIndex);
                data.checkLeft.forEach((item) => {
                    // 将 itemLeft 对应索引的数据挪动到左边去
                    data.itemRight.push(data.itemLeft[item]);
                    // 移除
                    data.itemLeft.splice(item, 1);
                });
                // 清空
                data.checkLeft = [];
                data.checkRight = [];},
            //checkbox 是绑定的是的数组的索引，所以 checkbox 的点击的程序不同的话索引的程序是不同的，这样删除有可能找不到会报错，排个序从大到小删除就能够
            // 这个是排序参数
            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;
        }
    }
}

vue3 继续更新中 …