快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

使用vue3和typeScript怎么实现一个穿梭框功能-创新互联

这期内容当中小编将会给大家带来有关使用vue3和typeScript怎么实现一个穿梭框功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

从事成都服务器托管,服务器租用,云主机,雅安服务器托管,空间域名,CDN,网络代维等服务。

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

html部分



  
  
    
      
列表一
      {{itemLeft.length}}
    
                     {{vo.label}}       
                  ←     →                     
列表二
      {{itemRight.length}}                           {{vo.label}}               

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),
    }
  }
})

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怎么实现一个穿梭框功能-创新互联
链接地址:http://6mz.cn/article/gshes.html

免费获取网站建设与品牌策划方案报价

*主要业务范围包括:高端网站建设, 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。
提交需求

    联系我们

    028-86922220
  • 手机:13518219792
  • 地址:成都市太升南路288号锦天国际A幢1002号
  • 24小时服务热线:400-028-6601

    网站建设服务

  • 网页设计
  • 网站制作
  • 网站开发

    网站推广服务

  • 营销网站建设
  • 百度快速排名
  • 整站网站推广

    网站运维服务

  • 基础维护
  • 网站改版
  • 网站维护

    FOLLOW US

  • 微信二维码

    微信二维码

Copyright © 2022 成都快上网科技有限公司 成都网站建设公司-选网站建设公司快上网!国内专业的网站制作公司!
All Rights Reserved 版权所有 蜀ICP备19037934号-11