动态设置上下容器高度（jquery）

最近做项目遇到一个需求，需要上下表格可以动态调节大小。
效果如下：

结构为wrapper为父容器common-tabbed-content是子容器，dividingLine为分割线

html 结构

<div id="wrapper">
	<div class="common-tabbed-content" id="payGridArea"></div>
	<div id="dividingLine"></div>
	<div id="dividingLineWrap"></div>
	<div class="common-tabbed-content" id="planGridArea"></div>
</div>

css样式

#wrapper {
	height: 100%;
	overflow: hidden;
}
.common-tabbed-content {
	height:50%;
}
#dividingLineWrap {
	position: absolute;
	width: calc(100% - 16px);
	cursor: row-resize;
	opacity: 0.5;
	height: 20px;
	margin-top: -10px;
}
#dividingLine{
	position: absolute;
	width: calc(100% - 16px);
	/*height: 10px;*/
	border-bottom: 1px dashed var(--blueStandard);
	z-index: 999;
}

js需设置内容为不可选，不然会出现问题

var dividingLine_flag = false;
$("#dividingLineWrap").mousedown(function(e){
    dividingLine_flag = true;
    $("body").css("user-select","none");
    $(this).css({
        height: "100%",
        top: "0",
        zIndex: 9999
    })
}).mousemove(function(e){
    if(dividingLine_flag) {
        if(e.clientY < 100 || $("#wrapper").height() - e.clientY < 100 ) {
            return;
        }
        var tableCont1Height = e.clientY
        $("#payGridArea").css({
            height: tableCont1Height + "px",
        })
        var tableCont2Height = $("#contend").height() - e.clientY;
        // console.log(tableCont1Height,tableCont2Height)
        $("#planGridArea").css({
            height: tableCont2Height + "px",
        })
    }
}).mouseout(function(e){
    dividingLine_flag = false;
    $("body").css("user-select","text");
    $("#dividingLineWrap").css({
        height: "20px",
        top: "auto",
        zIndex: 1
    })
}).mouseup(function(e){
    $("body").css("user-select","text");
    dividingLine_flag = false;
    $("#dividingLineWrap").css({
        height: "20px",
        top: "auto",
        zIndex: 1
    })
})

---

vue 版本
html 结构

<div id="wrapper">
	<div class="common-content" id="topGridArea"></div>
	<div id="dividingLine"></div>
    <div id="dividingLineWrap" @mousedown="mousedown" @mousemove="mousemove" @mouseout="clearMouseMove" @mouseup="clearMouseMove"></div>
	<div class="common-content" id="bottomGridArea"></div>
</div>

var dividingLine_flag = false

#dividingLineWrap {
  position: absolute;
  width: calc(100% - 32px);
  cursor: row-resize;
  opacity: 0.5;
  height: 20px;
  margin-top: -10px;
}
#dividingLine{
  position: absolute;
  width: calc(100% - 16px);
  border-bottom: 1px dashed #0066ff;
  z-index: 9999;
}

  methods: {
    mousemove(e) {
      if(dividingLine_flag) {
        // console.log(e)
          if(e.clientY < 50 || $("#wrapper").height() - e.clientY < 50 ) {
              return;
          }
          let tableCont1Height = e.clientY;
          $("#topGridArea").css({
              height: tableCont1Height + "px",
          })
          // let tableCont2Height = document.getElementById("wrapper").clientHeight - e.clientY
          let tableCont2Height = $("#wrapper").height() - e.clientY;
          $("#bottomGridArea").css({
              height: tableCont2Height + "px",
          })
          
      }
    },
    clearMouseMove(e) {
      dividingLine_flag = false;
        $("body").css("user-select","text");
        $("#dividingLineWrap").css({
            height: "20px",
            top: "auto",
            zIndex: 1
        })
    },
    mousedown(e) {
      console.log(e)
      dividingLine_flag = true;
      $("body").css("user-select","none");
      $("#dividingLineWrap").css({
          height: "100%",
          top: "0",
          zIndex: 9999
      })
    },
}