携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

今天在组件库闲逛时，发现了一个叫做穿梭框的组件，平时也没有用过，不过看着挺好玩的，就很好奇它是如何被实现出来的，今天我们就来实现一下

效果图

什穿梭框指的是两个盒子或者多个盒子之间的数据可以互相穿梭，我们今天来实现一下两个盒子数据之间的穿梭，来进行布置页面，首先有三个盒子左右两侧的盒子都是一模一样的结构和样式，中间的盒子存放的是两个按钮，按钮是用于控制左右两个盒子得数据进行互相穿梭的

页面结构

<div id="app">
    <div class="box">
      <div class="box_left">
          <ul>
              <li v-for="(item,index) in moveLeftList" :key="index" :class="{active:index==moveLeftIdx}" @click="leftItemClick(index)">{{item.name}}</li>
          </ul>
      </div>
      <div class="box_center">
        <button @click="leftMove">左移动</button>
        <button @click="rigthMove">右移动</button>
      </div>
      <div class="box_right">
           <ul>
              <li v-for="(item,index) in moveRightList" :key="index" :class="{active:index==moveRightIdx}" @click="rightItemClick(index)">{{item.name}}</li>
          </ul>
      </div>
    </div>
  </div>

样式

.box {
  padding-top: 100px;
  display: flex;
  justify-content: center;
}
.box_center {
  margin: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.box_left,
.box_right {
  width: 200px;
  height: 400px;
  background: rgb(238, 124, 124);
}
ul{
  display: flex;
  flex-direction: column;
  align-items: center;
}
li{
  list-style: none;
  cursor: pointer;
}
.active{
  background: red;
}

逻辑

export default {
  data() {
    return {
    //左盒子数据
      moveLeftList: [],
      //右盒子数据
      moveRightList: [],
      //左盒子数据选中下标
      moveLeftIdx:0,
      //右盒子数据选中下标
      moveRightIdx:0
    };
  },
  watch: {},
  methods: {
  //这里应是请求接口的，我们这里写死
    getData() {
      let list = [
        "炝冬笋",
        "拔丝山药",
        "糖焖莲子",
        "酿山药",
        "杏仁酪",
        "小炒螃蟹",
        "扒鸡腿儿",
        "扒鸡块儿",
        "扒肉",
        "扒面筋",
        "扒三样儿",
        "油泼肉",
        "酱泼肉",
        "炒虾黄儿",
        "熘蟹黄儿",
        "炒子蟹"
      ];
      //对于数据进行重组
      this.moveLeftList = list.map((R, I) => {
        let obj = {
          id: I,
          name: R
        };
        return obj;
      });
    },
    //左边盒子元素点击将下标赋值给变量存储
leftItemClick(index){
this.moveLeftIdx=index
},
//右边盒子元素点击将下标赋值给变量存储
rightItemClick(index){
 this.moveRightIdx=index
},
//左移动按钮点击
leftMove(){
//判断右边数据盒子内是否有数据，无数据则退出此函数
  if(!this.moveRightList.length)return;
      //将右边选中的数据追加到左边盒子中
   this.moveLeftList.push(this.moveRightList[this.moveRightIdx])
   // 将添加到左边盒子数据中的右盒子数据过滤出去
this.moveRightList=this.moveRightList.filter((R,I)=>I!=this.moveRightIdx)
},
rigthMove(){
//判断左边数据盒子内是否有数据，无数据则退出此函数
    if(!this.moveLeftList.length)return;
    //先将左边选中的数据追加到右边盒子中
    this.moveRightList.push(this.moveLeftList[this.moveLeftIdx])
    //将添加到右边盒子数据中的左盒子数据过滤出去
  this.moveLeftList=this.moveLeftList.filter((R,I)=>I!=this.moveLeftIdx) 
}
  },
  mounted() {
    this.getData()
  }
};

现在虽然很多样式功能组件库都能实现，但是我们也不能一味的去使用组件，应该在闲暇之余去关注一下该组件是如何实现的，这是一个学习成长的过程也是一个能够让我们技术得到提升的一个路径

代码已经放到了码上掘金上，有兴趣的大家可以看一下！

坚持努力，无惧未来！