【vue项目问题解决】如何用鼠标滚轮控制元素缩放？

记录在项目开发过程中遇到的问题，积累开发经验，欢迎大家一起留言探讨

一个元素（例如div），如何通过鼠标滚轮来控制他的缩放呢，很显然，我们需要为元素绑定监听事件，在vue中如何实现这种效果呢？
模板代码：

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

样式，注意：我们要给子元素开启过渡动画transition属性,这样看起来不会那么突兀，会呈现出平滑的缩放。

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

监听事件

export default {
  data() {
    return {
      scale: 1
    };
  },
  methods: {
  	zoomout() {
      console.log("out");
      document.getElementById("content").style.transform = "scale("+ this.scale +")";
      this.scale += 0.05;
    },
    zoomin() {
      console.log("min");
      document.getElementById("content").style.transform = "scale("+ this.scale +")";
      this.scale -= 0.05;
      if(this.scale < 0.5){
        this.scale = 0.5
      }
    },
  },
  mounted(){
  // 为父元素绑定滚轮监听事件
  	document.getElementById("body").onmousewheel = (event) => {
      var dir = event.deltaY > 0 ? "Up" : "Down";
      if (dir == "Up") {
        console.log("向上滑动");
        this.zoomin();
      } else {
        console.log("向下滑动");
        this.zoomout();
      }
      return false;
    };
  }
}

注意：绑定滚动事件的时候需要给父元素绑定，缩放效果绑定个子元素。
至此，可以完成缩放功能。