vue鼠标上下滚动放大与缩小

<template>
  <div id="body" class="body">
    <div class="content" id="content">缩放的元素</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        scale: 1
      }
    },
    methods: {
      // 向上滑动
      zoomin(){
        document.getElementById('content').style.transform=`scale(${this.scale})`
        this.scale+=0.05
      },
      // 向下滑动
      zoomout(){
        document.getElementById('content').style.transform=`scale(${this.scale})`
        this.scale-=0.5
        if(this.scale<0.5){
          this.scale=0.5
        }
      }
    },
    mounted(){
      document.getElementById('body').onmousewheel=(event)=>{
        let dir=event.deltaY>0 ? 'Up':'Down'
        if(dir=='Up'){
          //向上滑动
          this.zoomin()
        }else{
          //向下滑动
          this.zoomout()
        }
        return false;
      }
    }
  }
</script>

<style lang="scss" scoped>
.body{
  width: 500px;
  height: 500px;
  background-color: pink;
}
.content{
  width: 400px;
  height: 400px;
  transition: all 0.5s;
  background-color: skyblue;
  margin: 0 auto;
}
</style>