vue3+typeScript穿梭盒（每周一个widget）

时间：2023-03-31 15:57:06 vue.js

每周一个小组件前言实现功能：模仿元素穿梭盒的简单功能每周分享一个vue3+typeScript小组件，只想分享自己的实现思路，发帖者是前端菜鸟，记录一下实现过程，也许对你有帮助。效果展示预览地址github地址开发过程思路：用两个数组分别记录左右框内的值，根据复选框选中状态进行删除和添加。html部分

List1

←→

列表二

{{vo.label}}ts部分csspart.shuttle{width:800px;填充：50px0；显示：弹性；证明内容：空格之间；//整个穿梭箱.shuttle-box{width:300px;高度：500px；边框：1px实心#ddd；//Title.shuttle-box-title{背景：#f5f7fa;填充：020px；高度：40px；行高：40px；显示：弹性；证明内容：空格之间；.index-num{颜色：#909399；字体大小：12px；字体粗细：400；}}//List.shuttle-box-list{padding:20px;//列表项.shuttle-box-item{line-height:2.0;}}}//左右穿梭按钮.shuttle-click{padding-top:60px;游标：指针；跨度{填充：5px10px；显示：内联块；背景：#409eff；颜色：#ffffff；边距：05px；文本对齐：居中；

上一篇：vue2.x响应式原理

下一篇：前端常用插件、工具类库汇总

vue3+typeScript穿梭盒（每周一个widget）相关文章