温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用vue3和typeScript怎么实现一个穿梭框功能

发布时间:2020-12-29 14:03:34 阅读:231 作者:Leah 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

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

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的第一条数据',
        disabledtrue,
      }, {
        label'列表1的第二条数据',
        disabledfalse,
      }],
      itemRight: [{
        label'列表2的第一条数据',
        disabledfalse,
      }, {
        label'列表2的第二条数据',
        disabledfalse,
      }],
      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 {
  width800px;
  padding50px 0;
  display: flex;
  justify-content: space-between;
  //整个穿梭框
  .shuttle-box {
    width300px;
    height500px;
    border1px solid #ddd;
    //标题
    .shuttle-box-title {
      background#f5f7fa;
      padding0 20px;
      height40px;
      line-height40px;
      display: flex;
      justify-content: space-between;
      .index-num {
        color#909399;
        font-size12px;
        font-weight400;
      }
    }
    //列表
    .shuttle-box-list {
      padding20px;
      //一个列表item
      .shuttle-box-item {
        line-height2.0;
      }
    }
  }
  //左右穿梭按钮
  .shuttle-click {
    padding-top60px;
    cursor: pointer;
    span {
      padding5px 10px;
      display: inline-block;
      background#409eff;
      color#ffffff;
      margin0 5px;
      text-align: center;
    }
  }
}

上述就是小编为大家分享的使用vue3和typeScript怎么实现一个穿梭框功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×