vue 上下拖动 自适应布局

<template>
  <div class="DragLayoutBox" ref="box">
    <div v-if="$slots.top" :style="topstyle" class="toptombox" ref="topDom">
      <slot name="top"></slot>
    </div>
    <div id="line" ref="moveDom" class="dragLine" :style="linestyle" />
    <div
      v-if="$slots.bottom"
      :style="bottomstyle"
      class="bottombox"
      ref="bottomDom"
    >
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DragLayout',
  props: {
    minTopHeight: {
      type: String,
      default: '100'
    },
    minBottomHeight: {
      type: String,
      default: '100'
    },
    linePos: {
      type: String,
      default: '60'
    }
  },
  methods: {
    moveHandle(th, bh) {
      this.$refs.topDom.style.height = th + "px"
      this.$refs.bottomDom.style.height = bh - 5 + "px"
    },
  },
  computed: {
    topstyle() {
      let style = {};
      style["min-height"] = this.minTopHeight + "px";
      style["height"] = this.linePos + "%";
      return style;
    },
    bottomstyle() {
      let style = {};
      style["min-height"] = this.minBottomHeight + "px";
      style["height"] = (100 - this.linePos * 1 + 2) + "%";
      return style;
    },
    linestyle() {
      let style = {};
      style["top"] = this.linePos + "%";
      return style;
    }
  },
  mounted() {
    this.topDom = this.$refs.topDom
    const _this = this
    // this.$nextTick(() => {
    const moveDom = document.getElementById('line')
    var x = 0;
    var y = 0;
    var l = 0;
    var t = 0;
    var isDown = false;
    moveDom.onmousedown = function (e) {
      //获取x坐标和y坐标
      x = e.clientX;
      y = e.clientY;

      //获取左部和顶部的偏移量
      l = moveDom.offsetLeft;
      t = moveDom.offsetTop;
      //开关打开
      isDown = true;
      //设置样式  
      // moveDom.style.cursor = 'move';
      window.onmousemove = function (e) {
        if (isDown == false) {
          return;
        }
        //获取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);
        let a = _this.$refs.box.offsetHeight
        if (nt < _this.minTopHeight) {
          return
        }
        let bh = a - nt
        if (a - nt < _this.minBottomHeight) {
          return
        }
        _this.moveHandle(nt, bh)
        // moveDom.style.left = nl + 'px';
        moveDom.style.top = nt + 'px';
      }
      //鼠标抬起事件
      window.onmouseup = function () {
        //开关关闭
        isDown = false;
        window.onmousemove = null
        window.onmouseup = null
        window.onmousedown = null
      }
    }
    // })
  },
  watch: {
    $route(to, from) {
      document.onmousemove = null
      document.onmouseup = null
      document.onmousedown = null
    }
  },

}
</script>
<style lang="scss" scoped >
.DragLayoutBox {
  width: 100%;
  padding: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
  .dragLine {
    height: 5px;
    width: 100%;
    background: #e6dcdf;
    cursor: row-resize;
    // z-index: 9999;
    position: absolute;
    // top: 60%;
  }
  .toptombox {
    overflow-y: auto;
    // height: 60%;
    position: relative;
  }
  .bottombox {
    margin-top: 5px;
    position: relative;
    height: 38%;
    overflow-y: auto;
  }
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 5px;
}

/* 滚动条两端按钮 */
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

/* 外层轨道 */
::-webkit-scrollbar-track {
  border-radius: 5px;
}

/* 内层轨道，它会覆盖外层轨道的样式 */
::-webkit-scrollbar-track-piece {
  width: 4px;
  margin: 0 -2px 0;
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  min-height: 60px;
  min-width: 60px;
  border-radius: 5px;
}

/* 纵向滑块悬浮 */
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #333;
}

/* 横向滑块悬浮 */
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: #333;
}
</style>

使用方法 

import DragLayout from "@/components/DragLayout/index";

<div class="parentbox">
<DragLayout :minTopHeight="100" :minBottomHeight="100" linePos="75">
   <div slot="top">内容1</div>
   <div slot="bottom">内容2</div>
</DragLayout>
</div>

懒得截图了,你用一下就知道了