首页 技术设计 前端 vue

​ 在 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 会变小。