pinch-zoom-vue2

双指缩放单指拖动图片槽

给vue2使用的，vue3见pinch-zoom-vue3

安装

npm install pinch-zoom-vue2

快速开始

import PinchZoom from 'pinch-zoom-vue2';
import 'pinch-zoom-vue2/lib/index.css';

<!-- img-preview通过使用px,vw,vh等样式（不支持%）划出可以双指缩放缩放的区域 -->
<!-- 然后在img-preview里放入PinchZoom组件，即可让imageUrl图片在img-preview这个槽里进行双指缩放与单指拖动 -->
<div class="img-preview">
    <PinchZoom :imageUrl="imageUrl"></PinchZoom>
</div>

自定义参数

interface Props {
    imageUrl: string;
    maxScale: number; // 允许缩放的最大值，default: 5
    minScale: number; // 允许缩放的最小值，default: 0.7
}

实现效果

https://pinch-zoom.led.staging.kuaishou.com/