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

在 Vue.js 中，你可以使用 Vue 的组件化思想和一些库如Vue-Draggable、vue-zoom 图片缩放插件来实现图片的滚动放大缩小、拖拽功能，并保持原始大小。以下是一个简单的示例：

首先，你需要安装必要的库，比如 `vue-zoom` 和 `vue-draggable`。在项目中通过npm或yarn安装：

npm install vue-zoom vue-draggable
# 或者
yarn add vue-zoom vue-draggable

然后，在组件里导入并使用这两个库：

<template>
  <div class="image-container">
    <img :src="imageUrl" ref="zoomImage" @mousedown="startDrag" />
    <div v-if="isDragging" class="draggable-image" draggable>
      <vue-zoom :zoomable="true" @zoom-end="resetZoom" :zoom="zoomScale">
        <img :src="scaledImageUrl" />
      </vue-zoom>
    </div>
  </div>
</template>

<script>
import { Zoom } from 'vue-zoom'
import draggable from 'vuedraggable'

export default {
  components: {
    Zoom,
    draggable
  },
  data() {
    return {
      imageUrl: '',
      zoomScale: 1,
      isDragging: false,
      scaledImageUrl: ''
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      const img = this.$refs.zoomImage
      if (img && e.target === img) {
        this.scaledImageUrl = this.imageUrl
      }
    },
    resetZoom() {
      this.zoomScale = 1
      this.scaledImageUrl = this.imageUrl
      this.isDragging = false
    }
  }
}
</script>

<style scoped>
.image-container {
  position: relative;
}

.draggable-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: move;
}

.vue-zoom {
  pointer-events: none;
}
</style>

这个示例中，我们首先给图片添加了 mousedown 事件监听器来开始拖动。当用户开始拖动时，我们记录下原始图片URL，然后隐藏原图显示缩放后的图片。`vue-zoom` 模块负责图像的放大缩小，而 `draggable` 则实现了图片的拖拽。当你释放鼠标时，`@zoom-end` 触发 `resetZoom` 方法，将图片恢复到原始大小。

注意：这只是一个基本示例，实际应用可能需要处理更多边界情况和交互细节，比如防止图片超出容器范围等。