Vue 3实现的移动端两指控制图片缩放功能的插件

Vue 3中实现移动端图片双指缩放功能，通常可以借助一些轻量级的第三方插件，比如vue pinch-zoom这个库。这个插件允许你在Vue组件中轻松地添加双指手势放大缩小图片的功能。以下是简要步骤：

1. **安装插件**：首先通过npm或yarn在项目中安装`vue-pinch-zoom`：

   npm install vue-pinch-zoom

或者

   yarn add vue-pinch-zoom

2. **引入并使用**：
在你的`.vue`文件中，导入并注册插件，并将其应用到需要缩放的元素上，如img标签：

   <template>
     <div ref="zoomArea">
       <img :src="imageSrc" @pinch="handlePinch">
     </div>
   </template>

   <script>
   import { usePinchZoom } from 'vue-pinch-zoom';

   export default {
     setup() {
       const imageSrc = 'your-image-url';
       const { zoomInstance } = usePinchZoom();

       function handlePinch(e) {
         // 根据e.scale调整图片大小
         this.$refs.zoomArea.style.transform = `scale(${e.scale})`;
       }

       return {
         imageSrc,
         zoomInstance,
         handlePinch
       };
     }
   </script>

3. **设置初始状态**：
可能还需要初始化缩放比例，比如100%，以防止图片加载完成后的突然放大：

   data() {
     return {
       initialScale: 1,
     };
   },
   mounted() {
     this.$refs.zoomArea.style.transform = `scale(${this.initialScale})`;
   },

4. **处理边界条件**：
如果你想限制缩放范围，可以在`handlePinch`函数里加入相应的检查。