vue中手动拖拽div改变高度

项目的需求是可以手动拖拽底部div（红色区域），动态改变高度

我参考了一位网友的文章，改造适用自己的场景，但是找不到他的地址了。
核心是自定义一个指令，然后针对当前元素的鼠标事件进行坐标值得计算。

 directives: {
    dragging(el){
      let current = el; //当前元素
      let targetDiv = document.getElementById('map-footer-table')
      current.onmousedown = function(e){
          //鼠标按下
          document.onmousemove = function(e){
              let th = document.body.clientHeight - e.clientY - 55 
              if(th < 100){
                th = 100
              }
              targetDiv.style.height = th + "px";
          }
          document.onmouseup = function(e){
              document.onmousemove = null;
              document.onmouseup = null;
          };
          return false;
      };
    }
  },

div元素实现

<div class="dragble-box" :style="isShowTable ? 'cursor:n-resize' : ''" ref="element" v-dragging></div>