如何在ElementUI的el-image组件中实现手机端双指缩放预览功能？

<template>
  <el-image 
    ref="image"
    :preview-src-list="previewSrcList"
    :src="imageUrl"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    style="width: 100px; height: 100px; touch-action: manipulation;"
  ></el-image>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/path/to/your/image.jpg', // 替换为你的图片路径
      previewSrcList: ['/path/to/your/image.jpg'], // 替换为你的图片路径数组
      scale: 1,
      startDistance: null,
    };
  },
  methods: {
    handleTouchStart(event) {
      if (event.touches.length === 2) {
        this.startDistance = this.getDistance(event.touches);
      }
    },
    handleTouchMove(event) {
      if (event.touches.length === 2 && this.startDistance) {
        const currentDistance = this.getDistance(event.touches);
        const scaleFactor = currentDistance / this.startDistance;
        this.scale *= scaleFactor;
        this.$refs.image.style.transform = `scale(${this.scale})`;
        this.startDistance = currentDistance;
      }
    },
    getDistance(touches) {
      return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
    },
  },
};
</script>