vue3鼠标滚轮滚动放大或缩小图片

在Vue3中，要实现图片的鼠标滚轮滚动放大或缩小功能，你可以利用`vue-wheel-events`这样的第三方库，它提供了一种便捷的方式来处理滚动事件。首先你需要安装这个库：

npm install vue-wheel-events
# 或者
yarn add vue-wheel-events

然后在你的组件中导入并使用它：

<template>
  <div class="image-container" @wheel="handleWheelEvent">
    <img :src="imageUrl" alt="图片描述" />
  </div>
</template>

<script>
import { useWheelEvent } from 'vue-wheel-events';

export default {
  data() {
    return {
      imageUrl: 'your-image-url.jpg',
      scaleFactor: 1,
    };
  },
  methods: {
    handleWheelEvent({ delta }) {
      const newScale = this.scaleFactor + delta;
      // 防止缩放过度
      if (newScale > 1) {
        this.scaleFactor = 1;
      } else if (newScale < 0.1) {
        this.scaleFactor = 0.1;
      } else {
        this.scaleFactor = newScale;
      }
      
      // 更新图片尺寸，例如使用CSS transform进行缩放
      this.$refs.imageContainer.style.transform = `scale(${this.scaleFactor})`;
    },
  },
};
</script>

<style scoped>
.image-container {
  overflow: auto;
}
</style>

在这个例子中，当用户滚动鼠标滚轮时，`handleWheelEvent`方法会被触发，通过计算新的缩放比例，调整图片容器的`transform: scale()`样式，从而实现图片的放大或缩小。