vue3 svg 鼠标位置滚动变大或缩小

在Vue 3中，你可以使用Composition API来创建一个响应式的SVG组件，该组件可以根据鼠标的滚动变化来放大或缩小SVG。以下是一个简单的例子：

<template>
  <svg
    :width="svgWidth"
    :height="svgHeight"
    @wheel="handleWheel"
  >
    <!-- SVG内容 -->
  </svg>
</template>
 
<script setup>
import { ref } from 'vue';
 
const svgWidth = ref(500);
const svgHeight = ref(500);
 
function handleWheel(event) {
  event.preventDefault();
  const scaleFactor = 1.1; // 定义缩放因子
  const currentScale = svgWidth.value / 500; // 假设初始尺寸为500x500
 
  if (event.deltaY < 0) {
    // 鼠标向上滚动，放大
    svgWidth.value = svgWidth.value + (svgWidth.value * scaleFactor);
    svgHeight.value = svgHeight.value + (svgHeight.value * scaleFactor);
  } else {
    // 鼠标向下滚动，缩小
    svgWidth.value = svgWidth.value - (svgWidth.value * scaleFactor);
    svgHeight.value = svgHeight.value - (svgHeight.value * scaleFactor);
  }
}
</script>

在这个例子中，我们创建了一个响应式的SVG元素，它的width和height属性由svgWidth和svgHeight状态管理。当用户滚动鼠标滚轮时，handleWheel函数会被调用，根据滚动的方向来动态调整SVG的大小。如果滚轮向上移动，SVG会变大；如果滚轮向下移动，SVG会变小。