vue div放大缩小功能

实现 vue div 放大缩小功能，可以通过以下步骤实现：

1. 定义一个变量来存储 div 的缩放比例，初始值为 1。

2. 在 div 上绑定鼠标滚轮事件，根据滚轮方向来调整缩放比例，例如：

<div @wheel="onWheel">
  ...
</div>

...

data() {
  return {
    scale: 1
  }
},

methods: {
  onWheel(event) {
    // 根据滚轮方向调整缩放比例
    if (event.deltaY < 0) {
      this.scale += 0.1;
    } else {
      this.scale -= 0.1;
    }
  }
}

3. 在 div 的样式中使用 transform 属性来实现缩放，例如：

<div :style="{ transform: `scale(${scale})` }">
  ...
</div>

4. 完整代码如下：

<template>
  <div @wheel="onWheel" :style="{ transform: `scale(${scale})` }">
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1
    }
  },

  methods: {
    onWheel(event) {
      // 根据滚轮方向调整缩放比例
      if (event.deltaY < 0) {
        this.scale += 0.1;
      } else {
        this.scale -= 0.1;
      }
    }
  }
}
</script>