vue 编写一个鼠标滚轮控制缩放元素 长按拖动元素的代码

下面是使用Vue编写的一个简单的鼠标滚轮缩放元素和长按拖动元素的代码：

<template>
  <div class="container" @wheel="onWheel" @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove">
    <div class="box" :style="{transform: 'scale(' + scale + ')', top: top + 'px', left: left + 'px'}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false, // 是否正在拖动
      startMouseX: 0, // 开始拖动时鼠标的X坐标
      startMouseY: 0, // 开始拖动时鼠标的Y坐标
      startBoxLeft: 0, // 开始拖动时盒子的左侧位置
      startBoxTop: 0, // 开始拖动时盒子的顶部位置
      scale: 1, // 缩放比例
      top: 0, // 盒子的顶部位置
      left: 0 // 盒子的左侧位置
    }
  },
  methods: {
    // 鼠标滚轮事件
    onWheel(event) {
      // 滚动一次改变0.1倍缩放比例
      this.scale += event.deltaY > 0 ? -0.1 : 0.1;
      // 缩放比例的最小值为0.1，最大值为3
      if (this.scale < 0.1) {
        this.scale = 0.1;
      } else if (this.scale > 3) {
        this.scale = 3;
      }
    },
    // 鼠标按下事件
    onMouseDown(event) {
      // 如果点击的是盒子
      if (event.target.classList.contains('box')) {
        this.isDragging = true;
        this.startMouseX = event.clientX;
        this.startMouseY = event.clientY;
        this.startBoxLeft = this.left;
        this.startBoxTop = this.top;
      }
    },
    // 鼠标抬起事件
    onMouseUp(event) {
      this.isDragging = false;
    },
    // 鼠标移动事件
    onMouseMove(event) {
      if (this.isDragging) {
        const offsetX = event.clientX - this.startMouseX;
        const offsetY = event.clientY - this.startMouseY;
        this.left = this.startBoxLeft + offsetX;
        this.top = this.startBoxTop + offsetY;
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 500px;
  height: 500px;
  position: relative;
  border: 1px solid #ccc;
  overflow: hidden;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  cursor: move;
}
</style>

在这个示例中，我们创建了一个容器和一个红色的盒子。我们监听了容器的鼠标滚轮事件、鼠标按下事件、鼠标抬起事件和鼠标移动事件，来实现缩