vue怎么控制图片的大小

Vue 可以通过第三方库（如 vue-image-zoom 或者自定义指令）来实现图片的放大/缩小以及拖拽功能。这里有两个示例：

1. 使用 Vue-Image-Zoom 插件[^1]:

<template>
  <div class="content">
    <!-- Viewer图片预览插件 -->
    <viewer :images="viewerList" @image-zoomed="handleZoom">
      <img v-for="src in viewerList" :src="src.icon" :key="src.id"
           style="width: 50px; height: 50px; margin-right: 5px"
           @click="zoomIn(src)" @mouseleave="resetZoom(src)">
    </viewer>
  </div>
</template>

<script>
import VueImageZoom from 'vue-image-zoom';

export default {
  components: {
    Viewer: VueImageZoom,
  },
  props: {
    viewerList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    handleZoom(imgSrc) {
      // 处理图片缩放事件
    },
    zoomIn(src) {
      this.$refs['zoom-' + src.id].zoomIn();
    },
    resetZoom(src) {
      this.$refs['zoom-' + src.id].resetZoom();
    },
  },
};
</script>

2. 自定义指令实现图片缩放和拖拽[^2]:

<template>
  <previewPicture :img-url="imgJieTu" @zoom-end="zoomEnd" @drag-end="dragEnd"></previewPicture>
</template>

<template #previewPicture>
  <div ref="preview" @mousedown.prevent="startDrag" @mousemove.capture="moveDrag" @mouseup="stopDrag">
    <img :src="imgUrl" @mousewheel="zoom" />
  </div>
</template>

<script>
methods: {
  startDrag(e) {
    this.dragStartX = e.clientX;
    this.dragStartY = e.clientY;
  },
  moveDrag(e) {
    // 拖拽逻辑
  },
  stopDrag() {
    // 结束拖拽并可能调整图片大小
  },
  zoom(e) {
    // 缩放逻辑
    if (e.deltaY > 0) {
      this.imgWidth *= 1.1;
    } else {
      this.imgWidth /= 1.1;
    }
  },
  zoomEnd() {
    // 放大/缩小结束后的回调
  },
  dragEnd() {
    // 拖动结束后的回调
  },
},
</script>