# @coddicat/vue-pinch-scroll-zoom 中文文档

规范地址：https://npmcn.com/package/%40coddicat/vue-pinch-scroll-zoom/

版本：4\.7\.1
npm 元数据更新时间：2024-06-13T14:25:39.159Z
中文译文更新时间：2026-11-10T05:38:18.899Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40coddicat/vue-pinch-scroll-zoom
原文对照：https://npmcn.com/package/%40coddicat/vue-pinch-scroll-zoom/?lang=original
项目主页：https://github.com/coddicat/vue-pinch-scroll-zoom
源码仓库：https://github.com/coddicat/vue-pinch-scroll-zoom

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：228 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- 首次发布：2021-03-20T14:38:32.695Z
- 最新版本发布：2024-06-13T14:22:39.519Z
- 近 30 天下载量：16582（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 0 个）

## 中文简介

Vue 组件允许滚动和缩放内容功能,在桌面上利用鼠标互动,在移动设备上使用双指抓取手势

## 安装

```sh
npm install @coddicat/vue-pinch-scroll-zoom
```

也可以使用：`pnpm add @coddicat/vue-pinch-scroll-zoom`、`yarn add @coddicat/vue-pinch-scroll-zoom`、`bun add @coddicat/vue-pinch-scroll-zoom`

## README

# vue- pinch- scroll- zoom (英语)

Vue 组件, 使用鼠标事件或移动设备上的两个手指来提供内容滚动和缩放

## 重要说明

截至目前版本,此组件与Vue"^3.2.47"兼容并进行充分测试. 请确保您正在使用这个版本的Vue 或以后用于最佳性能和相容性. 我们将继续维持和更新这一构成部分,以便支持Vue的后期版本.

#### 示例:

![](https://github.com/coddicat/vue-pinch-scroll-zoom/blob/main/example.gif)

## 安装

```
npm i @coddicat/vue-pinch-scroll-zoom
```

## 使用量

主关:

```ts
import '@coddicat/vue-pinch-scroll-zoom/style.css';
```

```html
<PinchScrollZoom
  ref="zoomer"
  within
  centered
  key-actions
  :width="300"
  :height="400"
  :min-scale="0.3"
  :max-scale="6"
  @scaling="e => onEvent('scaling', e)"
  @startDrag="e => onEvent('startDrag', e)"
  @stopDrag="e => onEvent('stopDrag', e)"
  @dragging="e => onEvent('dragging', e)"
  style="border: 1px solid black"
  :content-width="500"
  :content-height="500"
>
  <img src="https://picsum.photos/500/500" width="500" height="500" />
</PinchScrollZoom>
```

```ts
<script setup lang="ts">
import { ref, reactive } from 'vue';
import PinchScrollZoom, {
  type PinchScrollZoomEmitData,
  type PinchScrollZoomExposed
} from '@coddicat/vue-pinch-scroll-zoom';

const zoomer = ref<PinchScrollZoomExposed>();

function onEvent(name: string, e: PinchScrollZoomEmitData): void {
  state.eventName = name;
  state.eventData = e;
  state.scale = e.scale;
  state.originX = e.originX;
  state.originY = e.originY;
  state.translateX = e.translateX;
  state.translateY = e.translateY;
}

function reset(): void {
  zoomer.value?.setData({
    scale: 1,
    originX: 150,
    originY: 200,
    translateX: -100,
    translateY: -50
  });
}

```

## 道具

以下属性不支持“.async”修改符

| 名称 | 所需经费 | 说明 | 默认 |
| --- | --- | --- | --- |
| 宽度 | 对 | 可见区域宽度 |  |
| 高度 | 对 | 可见区域高度 |  |
| 内容宽度 | 没有 | 当内容宽度与容器宽度不同时,应当定义 |  |
| 内容高 | 没有 | 当内容高度与容器高度不同时,应当定义 |  |
| 分钟比例 | 没有 | 最小允许缩放 | 0.3 (韩语) |
| 最大比例 | 没有 | 最大允许缩放量 | 页:1 |
| 在内部 | 没有 | 将内容滚动限制在其边框内 | 真实 |
| 轮速 | 没有 | 鼠标转盘时放大速度 | 0.001号 |
| 缩放 | 没有 | 内容的大小 | 1个 |
| 来源x | 没有 | 变换原生-x | 宽度/2 |
| 来源y | 没有 | 变原型-y | 高度/ 频率 2个 |
| 翻译-x | 没有 | 转换: 翻译 X | 0 个 |
| 翻译-y | 没有 | 转换: 翻译Y | 0 个 |
| 节流延迟 | 没有 | 渲染延迟( 毫秒) | 第25条 |
| 可拖动 | 没有 | 可拖动/关闭 | 真实 |
| 居中 | 没有 | 在可见区域集中内容 | 虚假 |
| 密钥动作 | 没有 | 使关键新闻事件(重点)能够缩放和移动 | 虚假 |
| 选项卡 | 没有 | 选项卡索引属性 | 0 如果启用了关键动作, 对关键事件需要值 |
| 密钥-分区-速度 | 没有 | 由关键事件缩放时的缩放速度 | 0.2 (韩语) |
| 密钥移动速度 | 没有 | 按关键事件移动时的移动速度 | 10个 |
| 键控 | 没有 | 关键守则和行动的记录 | 参见 PinchScrollZoom 默认控制 ("+","-",箭头) |
| 翻译 3d | 没有 | 在“ 翻译” 和“ 翻译3d” 转换之间切换 | 真实 |

## 活动

以下事件与理由相关:

```ts
export interface PinchScrollZoomEmitData {
  x: number;
  y: number;
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;  
}
```

-   启动 Drag
-   停止达格
-   拖动
-   缩放

## 被曝光的方法

### 更新数据

```ts
.setData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
    scale: number;
    originX: number;
    originY: number;
    translateX: number;
    translateY: number;
}

```

### 在可见区域集中图像内容

```ts
.centralize();
```

### 在可见区域移动图像内容

```ts
.manualMove(deltaX: number, deltaY: number);
```

### 在可见区域放大图像内容

```ts
.manualZoom(factor: number); //factor relative to the current value, so if current scale is 2 and execute .manualZoom(2) the new scale value will be 4
```

## 常见问题

### @coddicat/vue-pinch-scroll-zoom 是什么？

Vue 组件允许滚动和缩放内容功能,在桌面上利用鼠标互动,在移动设备上使用双指抓取手势

### 如何安装 @coddicat/vue-pinch-scroll-zoom？

在项目目录运行 npm install @coddicat/vue-pinch-scroll-zoom，或使用 pnpm add / yarn add / bun add。

### @coddicat/vue-pinch-scroll-zoom 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @coddicat/vue-pinch-scroll-zoom 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @coddicat/vue-pinch-scroll-zoom 可以商用吗？

@coddicat/vue-pinch-scroll-zoom 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @coddicat/vue-pinch-scroll-zoom 的下载量有多少？

根据 npm 官方下载统计，@coddicat/vue-pinch-scroll-zoom 在 2026/10/10 – 2026/11/08 这 30 天内被下载 16,582 次，日均约 553 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @coddicat/vue-pinch-scroll-zoom 还在维护吗？

最新版本 4\.7\.1 发布于 2024/06/13（2 年前）；至今共发布 49 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/03/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。