vue图片鼠标滚动放大功能代码实现

以下是一个简单的Vue组件，它使用鼠标滚轮放大图片：

<template>
  <div class="image-zoom" @wheel="onWheel">
    <img :src="imageSrc" :style="{ transform: 'scale(' + scale + ')' }">
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      scale: 1
    }
  },
  methods: {
    onWheel(event) {
      event.preventDefault();
      const delta = Math.sign(event.deltaY);
      this.scale += delta * 0.1;
      if (this.scale < 1) {
        this.scale = 1;
      }
    }
  }
}
</script>

<style>
.image-zoom {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
img {
  display: block;
  margin: auto;
  transition: transform 0.2s ease-in-out;
}
</style>

在这个组件中，我们使用了@wheel事件监听器来捕捉鼠标滚轮事件。在事件处理函数中，我们使用Math.sign()函数获取滚轮方向，并使用this.scale变量来存储当前图片的缩放比例。我们还添加了一些限制，以确保缩放比例不会小于1。

在模板中，我们使用<img>元素来显示图像，并使用Vue的绑定语法来设置transform CSS属性，以便根据当前的缩放比例来缩放图像。我们还将整个组件包裹在一个<div>元素中，并将其样式设置为overflow: hidden，以便在缩放时隐藏图像的溢出部分。