利用vue开发一套完整的以鼠标位置为中心的滑轮放大缩放功能

首先，我们需要使用 Vue 中的 `v-on` 指令来监听鼠标滚轮事件。在 `mounted` 钩子函数中添加以下代码：

mounted() {
  document.addEventListener("mousewheel", this.handleMouseWheel);
},
methods: {
  handleMouseWheel(event) {
    // 处理滚轮事件
  }
}

接着，在 `handleMouseWheel` 方法中，我们需要根据鼠标位置计算出需要缩放的比例，然后通过计算得出缩放后的位置，并将其应用到元素上。代码如下：

handleMouseWheel(event) {
  const zoomSpeed = 0.1; // 缩放速度
  const wheelDelta = event.wheelDelta / 120; // 获取滚轮滚动值
  const zoom = 1 + wheelDelta * zoomSpeed; // 计算缩放比例

  const el = this.$refs.zoomContainer; // 获取需要缩放的元素
  const rect = el.getBoundingClientRect(); // 获取元素相对于视口的位置
  const mouseX = event.clientX - rect.left; // 计算鼠标相对于元素的位置
  const mouseY = event.clientY - rect.top;
  
  // 根据鼠标位置计算出缩放后的位置
  const newLeft = mouseX - (mouseX - el.offsetLeft) * zoom;
  const newTop = mouseY - (mouseY - el.offsetTop) * zoom;
  
  // 应用缩放后的位置
  el.style.transform = `scale(${zoom}) translate(${newLeft}px, ${newTop}px)`;
}

最后，我们需要在模板中添加一个容器元素，并给它一个引用名，以便在方法中使用。代码如下：

<template>
  <div ref="zoomContainer"> <!-- 容器元素 -->
    <!-- 其他内容 -->
  </div>
</template>

完整的代码如下：

<template>
  <div ref="zoomContainer">
    <img src="./image.jpg" alt="image">
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener("mousewheel", this.handleMouseWheel);
  },
  methods: {
    handleMouseWheel(event) {
      const zoomSpeed = 0.1; // 缩放速度
      const wheelDelta = event.wheelDelta / 120; // 获取滚轮滚动值
      const zoom = 1 + wheelDelta * zoomSpeed; // 计算缩放比例

      const el = this.$refs.zoomContainer; // 获取需要缩放的元素
      const rect = el.getBoundingClientRect(); // 获取元素相对于视口的位置
      const mouseX = event.clientX - rect.left; // 计算鼠标相对于元素的位置
      const mouseY = event.clientY - rect.top;

      // 根据鼠标位置计算出缩放后的位置
      const newLeft = mouseX - (mouseX - el.offsetLeft) * zoom;
      const newTop = mouseY - (mouseY - el.offsetTop) * zoom;

      // 应用缩放后的位置
      el.style.transform = `scale(${zoom}) translate(${newLeft}px, ${newTop}px)`;
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
img {
  max-width: 100%;
  max-height: 100%;
}
</style>