vue 编写一个鼠标滚轮控制缩放元素 空格加鼠标左键长安按拖动元素的代码

以下是一个简单的Vue组件，可以实现鼠标滚轮缩放元素和空格加鼠标左键长按拖动元素的功能。

<template>
  <div ref="container" @wheel="onWheel" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseLeave" style="position: relative; width: 500px; height: 500px; overflow: hidden;">
    <div ref="content" :style="{transform: `scale(${scale})`, transformOrigin: 'top left', position: 'absolute', left: offsetX + 'px', top: offsetY + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      isDragging: false,
      startX: 0,
      startY: 0,
      lastX: 0,
      lastY: 0,
    };
  },
  methods: {
    onWheel(event) {
      const { deltaX, deltaY } = event;
      const scaleDelta = 0.05;
      const newScale = deltaY > 0 ? this.scale - scaleDelta : this.scale + scaleDelta;
      this.scale = Math.max(newScale, 0.1); // 限制最小缩放比例为0.1
    },
    onMouseDown(event) {
      if (event.button === 0 && event.shiftKey) {
        event.preventDefault();
        this.isDragging = true;
        this.startX = this.lastX = event.pageX;
        this.startY = this.lastY = event.pageY;
      }
    },
    onMouseMove(event) {
      if (this.isDragging) {
        const deltaX = event.pageX - this.lastX;
        const deltaY = event.pageY - this.lastY;
        this.offsetX += deltaX;
        this.offsetY += deltaY;
        this.lastX = event.pageX;
        this.lastY = event.pageY;
      }
    },
    onMouseUp(event) {
      if (this.isDragging && event.button === 0) {
        event.preventDefault();
        this.isDragging = false;
      }
    },
    onMouseLeave() {
      if (this.isDragging) {
        this.isDragging = false;
      }
    },
  },
};
</script>

在该组件中，我们使用一个`<div>`元素作为容器，它的`ref`属性为`container`。另外，我们还使用一个`<div>`元素作为内容，它的`ref`属性为`content`，并在其中使用了`<slot>`元素，以便使用该组件时可以传入任意内容。

在组件的`data`中，我们定义了一些状态变量，包括缩放比例`scale`、水平和垂直偏移量`offsetX`和`offsetY`，以及拖动状态`isDragging`、开始拖动时鼠标的位置`startX`和`startY`，以及上一次鼠标移动时的位置`lastX`和`lastY`。

在组件的`methods`中，我们实现了`onWheel`、`onMouseDown`、`onMouseMove`、`onMouseUp`和`onMouseLeave`五个方法，分别对应鼠