vue 设置图片手势放大

要在 Vue 中设置图片手势放大，可以使用以下步骤：

1. 在 Vue 的模板中添加一个 img 标签，用于显示图片，并绑定 touch 事件。

<template>
  <div>
    <img :src="imageSrc" ref="image" @touchmove="handleTouchMove" />
  </div>
</template>

2. 在 Vue 的样式中设置 img 标签的样式，包括宽度、高度和初始缩放比例。

img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.5s ease;
}

这里的 `transform: scale(1);` 表示初始缩放比例为 1。

3. 在 Vue 的方法中添加 touch 事件处理函数，用于检测用户的手势操作，并动态修改 img 标签的缩放比例。

export default {
  data() {
    return {
      imageSrc: 'your-image.jpg',
      currScale: 1,  // 当前缩放比例
      lastTouchLen: 0  // 上一次触摸点的数量
    }
  },
  methods: {
    handleTouchMove(e) {
      e.preventDefault();  // 阻止默认滚动行为
      const touches = e.touches;
      if (touches.length === 2 && this.lastTouchLen === 2) {  // 双指触摸
        const distance = Math.sqrt(
          Math.pow(touches[1].pageX - touches[0].pageX, 2) +
          Math.pow(touches[1].pageY - touches[0].pageY, 2)
        );
        const scale = distance / this.lastDistance;  // 计算缩放比例
        this.currScale *= scale;
        this.$refs.image.style.transform = `scale(${this.currScale})`;  // 修改缩放比例
      }
      this.lastTouchLen = touches.length;
    }
  },
  mounted() {
    this.$refs.image.addEventListener('touchend', () => {
      this.lastTouchLen = 0;
    });
    this.$refs.image.addEventListener('touchcancel', () => {
      this.lastTouchLen = 0;
    });
  }
}

这段代码会监听 img 标签的 touchmove 事件，检测用户的手势操作并动态修改缩放比例。其中，双指触摸时会计算两个触摸点之间的距离，然后根据上一次距离和当前距离的比例来计算缩放比例。最后，使用 `transform: scale()` 来修改 img 标签的缩放比例。

需要注意的是，为了防止页面滚动，需要在 touchmove 事件处理函数中调用 `e.preventDefault()` 阻止默认滚动行为。此外，为了在 touchend 和 touchcancel 事件中清空上一次触摸点数量的值，需要在 mounted 钩子函数中对 img 标签添加事件监听器。

这样，就可以在 Vue 中实现通过手势来放大图片了。