VUE 项目手写穿梭框

项目用到了穿梭框这个功能，刚开始用 Element-UI 组件库来写，没有达到预期的效果，于是就自己手撸写了一个；

先看效果：

代码附上：

    <!-- 绑定设备弹窗 -->
    <el-dialog title="绑定定位触发器" :visible.sync="jobsBoundPopup" width="30%" center>
      <!-- 穿梭框 -->
      <div class="row">
        <!--左侧-->
        <div class="col-xs-5 col-sm-5">
          <div class="panel panel-success">
            <!--标题-->
            <div class="panel-heading">
              <div class="panel-title">
                未绑定
                <!-- <span>2</span> -->
              </div>
            </div>
            <!--内容-->
            <div class="panel-body panel-height">
              <ul>
                <li v-for="(data1,index) in data_left" :key="index" @click="information(data1)">
                  <input :value="index" type="checkbox" />
                  {{data1.deviceName}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--中间-->
        <div class="col-xs-2 col-sm-2 transfer">
          <div class="transfer-table">
            <div class="transfer-cell el-icon-arrow-left" @click="left_move()"></div>
            <div class="transfer-cell el-icon-arrow-right" @click="right_move()"></div>
          </div>
        </div>
        <!--右侧-->
        <div class="col-xs-5 col-sm-5">
          <div class="panel panel-success">
            <!--标题-->
            <div class="panel-heading">
              <div class="panel-title">
                已绑定
                <!-- <span>2</span> -->
              </div>
            </div>
            <!--内容-->
            <div class="panel-body panel-height">
              <ul>
                <li v-for="(data2,index2) in data_right" :key="index2" @click="informations(data2)">
                  <input :value="index2" type="checkbox" />
                  {{data2.deviceName}}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="jobsBoundPopup = false">取 消</el-button>
        <el-button type="primary" @click="jobsBoundPopupSubmit">确 定</el-button>
      </span>-->
    </el-dialog>

<script>
export default {
    data() {
        return {
              // 绑定设备
              data_left: [],
              data_right: [],
              beaconId: 0,
              sysId: 0,
              cancelBeaconId: 0, 
        }
    }
    methods:{
         // 绑定设备
    boundPopup(row) {
      console.log(row);
      this.jobsBoundPopup = true;
      this.unBound();
      this.attendanceFrom.options.sysAttendanceId = row.sysAttendanceId;
      this.sysId = row.sysAttendanceId;
      this.bound();
    },
    // 未绑定信标列表
    unBound() {
      this.$http.put("/api/noBind/KQ/list").then((res) => {
        if (res.data.status == 200) {
          this.data_left = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 已绑定信标列表
    bound() {
      this.$http.put("/api/beacon/list", this.attendanceFrom).then((res) => {
        if (res.data.status == 200) {
          console.log(res.data.data.data);
          this.data_right = res.data.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    information(x) {
      console.log(x);
      this.beaconId = x.beaconId;
    },
    right_move() {
      if (this.data_right.length > 0) {
        this.$message.warning("绑定中已经有数据了");
      } else {
        this.$http
          .post(`/api/bindInfo/setKQ/${this.beaconId}/${this.sysId}`)
          .then((res) => {
            if (res.data.status == 200) {
              this.bound();
              this.unBound();
              this.getRoleList();
              this.$message.success("成功");
              this.jobsBoundPopup = false;
            } else {
              this.$message.error(res.data.message);
            }
          });
      }
    },
    // 取消
    informations(u) {
      console.log(u);
      this.cancelBeaconId = u.beaconId;
    },
    left_move() {
      this.$http
        .post(`/api/bindInfo/cancelKQ/${this.cancelBeaconId}`)
        .then((res) => {
          if (res.data.status == 200) {
            this.getRoleList();
            this.bound();
            this.unBound();
            this.$message.success("成功");
            this.jobsBoundPopup = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    }
}
</script>

如果大佬有其他简单的方法，欢迎私信滴滴。。。

小demo:

直接贴代码：

<template>
  <div id="my">
    <div class="container">
      <div class="row">
        <!--左侧-->
        <div class="col-xs-5 col-sm-5">
          <div class="panel panel-success">
            <!--标题-->
            <div class="panel-heading">
              <h3 class="panel-title">列表1<span>2</span></h3>
            </div>
            <!--内容-->
            <div class="panel-body panel-height">
              <ul>
                <li v-for="(data1, index) in data_left" :key="index">
                  <input
                    :value="index"
                    type="checkbox"
                    v-model="check_val_left"
                  />
                  {{ data1.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--中间-->
        <div class="col-xs-2 col-sm-2 transfer">
          <div class="transfer-table">
            <a class="transfer-cell" @click="left_move()">>></a>
            <a class="transfer-cell" @click="right_move()"><<</a>
          </div>
        </div>
        <!--右侧-->
        <div class="col-xs-5 col-sm-5">
          <div class="panel panel-success">
            <!--标题-->
            <div class="panel-heading">
              <h3 class="panel-title">列表2 <span>2</span></h3>
            </div>
            <!--内容-->
            <div class="panel-body panel-height">
              <ul>
                <li v-for="(data2, index2) in data_right" :key="index2">
                  <input
                    :value="index2"
                    type="checkbox"
                    v-model="check_val_right"
                  />
                  {{ data2.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
function sortNumber(a, b) {
  return b - a;
}
export default {
  data() {
    return {
      data_left: [
        { id: 1, name: "北京" },
        { id: 2, name: "上海" },
        { id: 3, name: "深圳" },
      ],
      data_right: [
        { id: 11, name: "重庆" },
        { id: 12, name: "成都" },
        { id: 13, name: "贵州" },
      ],
      check_val_left: [],
      check_val_right: [],
    };
  },
  methods: {
    left_move: function () {
      //要把这个数组排序
      this.check_val_left.sort(sortNumber);
      this.check_val_left.forEach((item, index, array) => {
        //执行代码
        //console.log(item);
        //将data_left对应索引的数据移动到右边去
        this.data_right.push(this.data_left[item]);
        //console.log(this.data_left);
        this.data_left.splice(item, 1);
      });
      //忘记把这个数组置空了
      this.check_val_left = [];
    },
    right_move: function () {
      //console.log(this.check_val_right);
      this.check_val_right.sort(sortNumber);
      this.check_val_right.forEach((item, index, array) => {
        //执行代码
        //console.log(item);
        //将data_left对应索引的数据移动到右边去
        this.data_left.push(this.data_right[item]);
        //console.log(this.data_left);
        this.data_right.splice(item, 1);
      });
      this.check_val_right = [];
    },
  },
};
</script>
<style scoped>
.row {
  display: flex;
  justify-content: space-between;
}
.panel {
  width: 200px;
  height: 300px;
  border: 1px solid #edf0f6;
  box-sizing: border-box;
  border-radius: 5px;
}
.panel-heading {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #edf0f6;
  background-color: #f5f7fa;
}
.transfer-cell {
  width: 56px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  background: #66b1ff;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 30px;
}
.transfer-table {
  margin-top: 100px;
}
li {
  list-style: none;
  line-height: 23px;
  margin-left: 5px;
}
.transfer-cell:hover {
  cursor: pointer;
}
.col-xs-2 {
  width: 100px;
  text-align: center;
}
.panel-body {
  height: 257px;
  overflow: auto;
}
.searchPerson {
  border: 1px solid #e0e0e0;
  margin-left: 5px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  outline: none;
}
</style>