vue3+typeScript穿梭框的实现示例

这篇文章主要介绍了vue3+typeScript穿梭框的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具…

这篇文章主要介绍了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+typeScript穿梭框的实现示例的文章就介绍到这了,更多相关vue3+typeScript穿梭框内容请搜索www.cfluntan.cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.cfluntan.cn!

以上就是vue3+typeScript穿梭框的实现示例的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部