VUE Transfer 穿梭框

点击左边到右边，并且删除点击边的数据，点击右边同理。

<template>
  <div
    class="transfer"
    style="text-align: left;display: inline-block;font-size: 14px;"
  >
    <div class="transfer-panel">
      <p class="transfer-panel__header">
        <label class="tilte"
          ><span class="title_label">发布文章<span>0/5</span></span></label
        >
      </p>
      <div class="transfer-panel__body is-with-footer">
        <div class="transfer_ul_art">
          <ul
            style="padding-left: 22px; padding-top: 15px;"
            class="releaseArticle"
          >
            <li
              v-for="(item, index) in articleList.filter(obj => {
                return obj.isHide != undefined;
              })"
              :key="item.ID"
              :data-id="item.ID"
              :data-index="index"
            >
              <div class="ul-content" style="pointer-events: none;">
                <img
                  :src="item.ImgUrl"
                  width="100%"
                  :alt="item.Title"
                  :title="item.Title"
                />
                <h5>{{ item.Title }}</h5>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <p class="transfer-panel__footer"></p>
    </div>

    <div class="transfer-panel" style="margin-left: 25px;">
      <p class="transfer-panel__header">
        <label class="tilte">全部文章</label>
      </p>
      <div class="transfer-panel__body is-with-footer">
        <div class="transfer_ul_art queryDiv">
          <ul style="padding-left: 22px; padding-top: 15px;" class="ulList">
            <li
              v-for="(item, index) in articleList.filter(obj => {
                return obj.isHide == undefined;
              })"
              :key="item.ID"
              :data-id="item.ID"
              :data-index="index"
            >
              <div class="ul-content" style="pointer-events: none;">
                <img
                  :src="item.ImgUrl"
                  width="100%"
                  :alt="item.Title"
                  :title="item.Title"
                />
                <h5>{{ item.Title }}</h5>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <p class="transfer-panel__footer">
        <label style="margin-top: 10px;color: #999999;">我是有底线的---</label>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      articleList: []
    };
  },
  created: function() {
  },
  methods: {
    ScreenData(e, type) {
      let _this = this;
      let target = e.target; //事件发生的元素
      let data = target.dataset; //获取集合数据
      const dataIndex = _this.articleList.findIndex(k => {
        return k.ID.match(data.id);
      });
      let DataList = _this.articleList;
      type == 1
        ? (DataList[dataIndex].isHide = true)
        : delete DataList[dataIndex].isHide;
      _this.$set(_this.articleList, dataIndex, DataList[dataIndex]);
    }
  },
  mounted() {
    let _this = this;
    _this.$nextTick(() => {
      /**监听div的滚动条是否到底*/
      const el = document.querySelector(".queryDiv");
      const offsetHeight = $(".queryDiv").height(); //el.offsetHeight;
      el.onscroll = () => {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight;
        //console.log(offsetHeight, scrollTop, scrollHeight);
        if (offsetHeight + scrollTop - scrollHeight >= -1) {
          console.log("div到底了");
          // 需要执行的代码
        }
      };
    });

    //事件委托(右边框)
    document.querySelector(".ulList").addEventListener("click", function(e) {
      const len = _this.articleList.filter(obj => {
        return obj.isHide != undefined;
      });
      if (len.length >= 5) {
        _this.$message("最多只能选择5篇文章");
        return false;
      }
      _this.ScreenData(e, 1);
    });
    //左边框
    document
      .querySelector(".releaseArticle")
      .addEventListener("click", function(e) {
        _this.ScreenData(e, 0);
      });
  },
  components: {}
};
</script>
<style scoped>
.transfer-panel {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  width: 380px;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
}

.transfer-panel__header {
  height: 40px;
  line-height: 40px;
  background: #f5f7fa;
  margin: 0;
  padding-left: 15px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
}
.transfer-panel .transfer-panel__header .tilte .title_label span {
  position: absolute;
  right: 15px;
  color: #909399;
  font-size: 12px;
  font-weight: 400;
}
.transfer-panel__body {
  height: auto;
  width: auto;
}
.transfer-panel__footer {
  height: 40px;
  background: #fff;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ebeef5;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.transfer_ul_art {
  overflow-y: auto;
  height: 31.25rem;
}
.transfer_ul_art li {
  width: 158px;
  border: 1px solid #ddd;
  float: left;
  margin: 0 15px 5px 0;
  list-style: none;
  position: relative;
}

.transfer_ul_art li img {
  height: 100px;
  overflow: hidden;
}

.transfer_ul_art li h5 {
  padding: 8px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid #eee;
  margin: 0;
}

.transfer_ul_art::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.transfer_ul_art::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}

.transfer_ul_art::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.checkbox__input {
  position: absolute;
  z-index: 14;
  top: 0;
  left: 0;
}
</style>

View Code

效果: