vue2 图片滚轮放大缩小，拖拽，图片可以恢复原来大小，代码怎么写

在Vue2中实现图片的滚轮放大缩小、拖拽以及恢复原大小功能，通常会结合`vue-awesome-swiper`库来处理滑动效果，以及HTML5的鼠标事件和CSS样式来实现缩放和恢复。这里是一个简化的示例：

首先，你需要安装`vue-awesome-swiper`库：

npm install vue-awesome-swiper --save

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

<template>
  <div class="swiper-container">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(image, index) in images" :key="index">
        <img :src="image.src" @wheel="handleWheel(index)" @dragstart.prevent="preventDragStart(index)" @dragend="dragEnd(index)">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      images: [
        // 图片数组，包含原始图片URL
      ],
      swiperOptions: {} // 初始化Swiper的配置选项
    }
  },
  methods: {
    handleWheel(index) {
      const scale = event.deltaY > 0 ? 1.1 : 1 / 1.1 // 滚轮上滚放大，下滚缩小
      this.$refs[`slide-${index}`].swipeInstance.update({ zoom: scale })
    },
    preventDragStart(index) {
      event.preventDefault()
    },
    dragEnd(index) {
      // 如果需要恢复原始大小，这里可以设置回默认的zoom值，假设原本是1
      this.$refs[`slide-${index}`].swipeInstance.update({ zoom: 1 })
    }
  }
}
</script>

在这个例子中，我们监听了`@wheel`事件来处理滚轮操作，`@dragstart.prevent`阻止了拖拽的默认行为，`@dragend`则在拖动结束时还原图片大小。

注意，这个示例假设你已经有一个包含图片URL的数组`images`。具体的`swiperOptions`根据你的需求配置，例如滑动切换、自动播放等。