原生js实现元素放大缩小

<template>
  <div id="app"
    @mousemove="handleMousemove"
    ref="resize"
    @mousedown="handleMousedown"
    @mouseup="handleMouseup"
    :style="{ cursor: cursorResize ? 'se-resize' : 'default' }">
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    // HelloWorld,
    // TestTest
    // ResizeComp
  },
  data(){
    return {
      startX: 0,
      startY: 0,
      down: false,
      resizeStatus: false,
      cursorResize: false
    }
  },
  methods: {
    // down置为true，记录鼠标点下的位置
    handleMousedown(e){
      this.down = true
      this.startX = e.pageX
      this.startY = e.pageY
    },

    // 鼠标抬起切换down状态
    handleMouseup(){
      this.down = false
      document.onmousemove = null
      document.onmousedown = null
      document.onmouseup = null
    },

    // 
    handleMousemove(e){
      // 获取鼠标的实时位置
      let curX = e.clientX
      let curY = e.clientY

      let target = this.$refs.resize.querySelector('.box')

      // 获取目标元素右下角的位置
      let x = target.getBoundingClientRect().right
      let y = target.getBoundingClientRect().bottom

      // 计算鼠标距离右下角的位置
      let increaseX = curX - x
      let increaseY = curY - y

      // 鼠标进入右下角区域，改变鼠标样式
      if(curX >= x - 5 && curX <= x + 5 && curY >= y - 5 && curY <= y + 5){
        this.cursorResize = true
      } else {
        this.cursorResize = false
      }

      // 按下开始拖拽改变目标元素大小
      if(this.down){
        this.resizeStatus = true
        target.style.width = target.offsetWidth + increaseX + 'px'
        target.style.height = target.offsetHeight + increaseY + 'px'
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 0 auto;
  margin-top: 100px;
}
#app {
  width: 800px;
}
</style>