Zoom 缩放

介绍

控制元素在视图内缩放、移动，常用于画廊、图片查看等场景。支持双指捏合缩放（以双指中点为锚点）、放大后单指拖动，以及可选的双指旋转。

TIP

建议在真机或开启触控模拟的环境下体验双指手势。

基础用法

将需要缩放的内容放入 Zoom 组件即可。

<vd-zoom>
  <view class="box"></view>
</vd-zoom>

缩放图片

可包裹 Image 等媒体内容。

<vd-zoom>
  <vd-image src="..." width="100%" mode="widthFix" />
</vd-zoom>

自定义缩放范围

通过 min-zoom、max-zoom 限制缩放比例。

<vd-zoom :min-zoom="1" :max-zoom="3">
  <vd-image src="..." width="100%" mode="widthFix" />
</vd-zoom>

双指旋转

通过 rotatable 开启双指旋转，松手后吸附到最近的 90°。

<vd-zoom rotatable>
  <vd-image src="..." width="100%" mode="widthFix" />
</vd-zoom>

盒内自由拖动

默认 moveable-when-overflow 为 true：仅内容超出容器时可拖（适合相册预览）。设为 false 后，内容小于容器时也可在盒内拖动。

<vd-zoom :moveable-when-overflow="false">
  <view class="box"></view>
</vd-zoom>

手势回调

底层 useTouchZoom 可通过 onZoom 监听手势阶段（start / move / end）。

import { useTouchZoom } from '@vital-design/use';

const { onZoom, state } = useTouchZoom({ /* ... */ });

onZoom((type, event) => {
  console.log(type, event.scale, event.rotate, event.moving, event.boundRect, event.viewRect);
});

API

Props

参数	说明	类型	默认值
max-zoom	最大缩放倍数	number | string	5
min-zoom	最小缩放倍数	number | string	0.3
zoomable	是否允许缩放	boolean	true
moveable	是否允许移动	boolean	true
moveable-when-overflow	仅内容超出容器时允许拖动；为 false 时内容小于容器也可在盒内拖动	boolean	true
rotatable	是否允许双指旋转	boolean	false
wheel-zoom	滚轮单次缩放步进	number | string	0.1

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
default	自定义内容

类型定义

组件导出以下类型定义：

import type {
  ZoomProps,
  ZoomEmits,
} from 'vital-design';

手势能力由 @vital-design/use 的 useTouchZoom 提供，ImagePreview 内部同样复用。