vue3中如何使点击后的图片可以过鼠标滚轮来实现放大和缩小

可以通过以下步骤来实现：

1. 首先，在Vue3中引入一个图片组件，在该组件中设置图片的样式和初始大小。

2. 在该组件中添加一个点击事件，将该事件绑定到图片上。当用户点击图片时，会触发该事件。

3. 在该点击事件中，使用Vue3的$refs属性获取到该图片元素，并为其添加鼠标滚轮事件监听器。

4. 在鼠标滚轮事件监听器中，根据鼠标滚轮的方向来判断是放大还是缩小。可以使用transform属性来实现图片的缩放。

下面是一个示例代码：

<template>
  <div>
    <img ref="image" src="./image.png" @click="onClick" />
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      const img = this.$refs.image;
      img.addEventListener("wheel", this.onWheel);
    },
    onWheel(event) {
      const img = this.$refs.image;
      const delta = Math.sign(event.deltaY);
      const scale = delta > 0 ? 1.1 : 0.9;

      img.style.transform = `scale(${scale})`;
    },
  },
};
</script>

<style>
img {
  width: 200px;
  height: 200px;
}
</style>

在这个示例代码中，当用户点击图片时，会触发onClick方法。在该方法中，使用$refs属性获取到图片元素，并为其添加鼠标滚轮事件监听器。

在鼠标滚轮事件监听器中，根据鼠标滚轮的方向来判断是放大还是缩小，并使用transform属性来实现图片的缩放。这里使用了Math.sign方法来判断鼠标滚轮的方向，如果deltaY是正数，则表示鼠标向上滚动，需要放大图片；如果deltaY是负数，则表示鼠标向下滚动，需要缩小图片。

最后，还需要在样式中设置图片的初始大小。在这个示例代码中，图片的初始大小为200px*200px。