手写穿梭组件

<template>
<div>
    <div class="test">
     <el-button type = "primary" @click="handleclick">默认按钮</el-button>
    </div>
    <div class="testa">
      <div class="mainaq"></div>
    </div>

  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
  <div class="main">
    <div class="leftblock">
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
  </div>
  <div>
      <el-checkbox-group v-model="checkList">
    <el-checkbox v-for="item in leftData" :label="item" :key="item"></el-checkbox>
    
  </el-checkbox-group>
   
  </div>
</el-card>
    </div>

    <div class="minbtn">
      <div class="btns">
        <div><el-button icon="el-icon-d-arrow-right" circle @click="changeclick('allright')"></el-button></div>
      <div><el-button icon="el-icon-arrow-right" circle @click="changeclick('right')"></el-button></div>
      <div><el-button icon="el-icon-d-arrow-left" circle @click="changeclick('allleft')"></el-button></div>
      <div><el-button icon="el-icon-arrow-left" circle @click="changeclick('left')"></el-button></div>
      </div>
      
      
    </div>
    <div class="rightblock">
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
  </div>
  <div >
     <el-checkbox-group v-model="checkLists">
    <el-checkbox v-for="item in rightData" :label="item" :key="item"></el-checkbox>
  </el-checkbox-group>
  </div>
</el-card>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</div>
  
</template>

<script>
export default {
  data(){
    return{
      dialogVisible:false,
      checkList: [],
      checkLists:[],
      leftData:[],
      rightData:[],
      value:['re','fdsfds','gfgvf','rtrgrgr','ccdddd','vdvfvf','fsgdfss','gfdgfdgd',
      'dfcdcdv','gfvfvf','dcd dv','cdcdcc','dvfvfdfv','cdcdcd','fgdxvdx','ghfdfgd']
    }
  },
  methods:{
    handleclick(){
      this.dialogVisible = true
      this.leftData = this.value
    },
    //  数组过滤
    difference(arr=[],oarr=[]){
          return arr.reduce((t,v) => (!oarr.includes(v) && t.push(v),t),[])
    },


    changeclick(type){
      switch (type) {
        case 'allright':
          console.log('allright')
          this.leftData=[]
          this.rightData = this.value
          break;

          case 'right':
          console.log('right')
          this.rightData = this.checkList
          this.leftData = this.difference(this.value,this.checkList)
          break;

          case 'allleft':
          console.log('allleft')
           this.rightData=[]
          this.leftData = this.value
          break;

          case 'left':
          console.log('left')
          break;
      
       
      }
    }
  }


}
</script>

<style scoped>
  .main{
    display:flex;
    height: 350px;
    overflow: hidden;
  }
  .minbtn{
    width: 10%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .btns{
    position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);


  }


  .leftblock{
    flex: 1;
  }
  .rightblock{
    flex: 1;
  }
  .el-checkbox-group{
    height: 300px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
  }
 .testa{
   position: relative;
   height: 400px;
   width: 200px;
   background: slateblue;
   margin: 0 auto;
 }
 .mainaq{
   height: 300px;
   width: 150px;
   background: springgreen;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
 }

 .el-button{
   margin-bottom: 10px;
 }



</style>