vue以鼠标位置为中心的滑轮放大缩放功能

你可以通过在`mounted`生命周期中监听鼠标滚轮事件，然后根据鼠标位置和缩放比例计算出视口的缩放中心点和缩放比例，最后使用`transform`样式对视口进行缩放。

以下是一个简单的实现示例：

<template>
  <div class="container" ref="container" @wheel="handleWheel">
    <div class="content" ref="content">
      <!-- your content here -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.container = this.$refs.container;
    this.content = this.$refs.content;
    this.scale = 1;
  },
  methods: {
    handleWheel(event) {
      const deltaX = event.deltaX;
      const deltaY = event.deltaY;
      const rect = this.container.getBoundingClientRect();
      const containerX = event.clientX - rect.left;
      const containerY = event.clientY - rect.top;
      const oldScale = this.scale;
      const newScale = oldScale + deltaY / 100;

      this.scale = Math.max(1, Math.min(newScale, 5));
      const scaleDelta = this.scale - oldScale;
      const offsetX = containerX * scaleDelta;
      const offsetY = containerY * scaleDelta;

      this.content.style.transformOrigin = `${containerX}px ${containerY}px`;
      this.content.style.transform = `scale(${this.scale}) translate(${offsetX}px, ${offsetY}px)`;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.content {
  transform-origin: 0 0;
}
</style>

解释一下代码：

- 在`mounted`生命周期中获取容器和内容的引用，并初始化缩放比例为1。
- 在`handleWheel`方法中获取鼠标滚动的偏移量和容器相对于文档的位置，计算出缩放中心点和缩放比例。
- 根据缩放比例和中心点计算出内容偏移量，并将缩放和偏移应用到内容上。

需要注意的是，这个实现仅支持在容器内部进行缩放，如果需要支持在任意位置进行缩放，需要对容器的滚动条进行处理。