vue2拖拽改变div高度+上防抖

<template>
  <div>
    <div class="box">
      <div :class="'tinydemo css'">
      </div>
      <div class="resize" @mousedown="dragEagle">
        <div></div>
      </div>
    </div>
  </div>
</template>
<!-- 拖拽改变高度层demo -->
<script>
  const debounce = (function () {
    let timer = 0;
    return function (callback, ms = 200) {  //设置默认200ms
      clearTimeout(timer);
      timer = setTimeout(callback, ms);
    };
  })();
  export default {
    methods: {
      dragEagle(e) {
        // 重新定义一下this防止指针丢失
        var that = this
        //鼠标拖动改变div大小
        var targetDiv = document.getElementsByClassName('tinydemo')
        //得到点击时该容器的宽高：
        var targetDivHeight = targetDiv[0].offsetHeight
        var startX = e.clientX
        var startY = e.clientY
        var _this = this
        document.onmousemove = function (e) {
          e.preventDefault()
          //得到鼠标拖动的宽高距离：取绝对值
          var distX = Math.abs(e.clientX - startX)
          var distY = Math.abs(e.clientY - startY)
          //往下方拖动：
          if (e.clientY > startY) {
            targetDiv[0].style.height = targetDivHeight + distY + 'px'
          }

          //往上方拖动：
          if (e.clientX > startX && e.clientY < startY) {
            targetDiv[0].style.height = targetDivHeight - distY + 'px'
          }

          // if (parseInt(targetDiv[0].style.height) >= 700) {
          //   targetDiv[0].style.height = 700 + 'px'
          // }
          // if (parseInt(targetDiv[0].style.height) <= 100) {
          //   targetDiv[0].style.height = 100 + 'px'
          // }
          debounce(async () => {

            that.dionghgao(targetDiv[0].style.height)
          }, 100);

        }
        document.onmouseup = function () {
          document.onmousemove = null
        }
      },
      dionghgao(height) {
        console.log(height)
      }
    }
  };  
</script>

<style scoped>
  .box {
    position: relative;
    margin-bottom: 6px;
  }

  .css {
    width: 100%;
    border: 1px solid #000;
    text-align: left;
    overflow: auto;
    position: relative;
  }

  .resize {
    width: 100%;
    height: 5px;
    cursor: n-resize;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #ccc;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .resize div {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: rgb(187, 186, 186);
  }
</style>