要实现这样一个功能，拖拽那条线，下面的上下内容分区的比例会改变，类似于我们打开了开发者工具拖动控制台的效果
废话不多说直接上代码

<div ref="topDom" class="containorOuter">上面</div>
<div  id="line" ref="moveDom" class="dragLine" />  // 拖拽的线
<div ref="bottomDom" >下面</div>

 mounted() {
    this.topDom = this.$refs.topDom
    const _this = this
    this.$nextTick(() => {
      const moveDom = document.getElementById('line')
      moveDom.onmousedown = function(e) {
        _this.clientStartX = e.clientY
        document.onmousemove = function(e) {
          _this.moveHandle(e.clientY, _this.topDom)
          return false
        }

        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    })
  },
  methods: {
    moveHandle(nowClient, topDom) {
      let changeHight = nowClient - 103
      let remainHight = document.body.clientHeight - nowClient
      // 下面两个判断是控制拖动的最大范围，不能完全覆盖
      if (changeHight < 100) {
        changeHight = 100
        nowClient = 100 + 103
        remainHight = document.body.clientHeight - nowClient
      }
      if (remainHight < 100) {
        remainHight = 100
        nowClient = document.body.clientHeight - 100
        changeHight = document.body.clientHeight - 203
      }
      topDom.style.height = changeHight + 'px'
      this.$refs.bottomDom.style.height = remainHight + 'px'
    },
  }

// 线的样式
.dragLine {
    height: 2px;
    background: #dcdfe6;
    cursor: row-resize;
  }

关于鼠标光标样式，大家可以参考这篇文章
https://blog.csdn.net/u012767761/article/details/82712194