vue3+typeScript 穿梭框(每周一个小组件)

每周一个小组件

前言

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

效果展示

预览地址

github地址

开发过程

思路：用两个数组分别记录左右框框里面的值，根据复选框选中状态来实现删除增加即可

html部分

    
    

        

            
列表一
            
{{itemLeft.length}}
        
        

            

                 {{vo.label}}
            
        
    
    
    

        ←
        →
    
    
    

        

            
列表二
            
{{itemRight.length}}
        
        

            

                 {{vo.label}}
            
        
    

ts部分

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持续更新中...