# vue-touch-zoom

> 基于vue2.0，实现移动端容器内缩放与位移，缩放基于两指中心

Latest version **1.0.7** (published 2022-05-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-touch-zoom
pnpm add vue-touch-zoom
yarn add vue-touch-zoom
bun add vue-touch-zoom
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-05-27 |
| First published | 2022-03-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | yuchenbin |
| Maintainers | yuchenbin |
| Keywords | touch, zoom, 缩放, vue, shrink, grow, move, phone, 移动端, vue-touch, vue-zoom |

## Links

- npm: https://www.npmjs.com/package/vue-touch-zoom
- Repository: https://github.com/yuchenbin1/vue-touch-zoom
- Homepage: https://github.com/yuchenbin1/vue-touch-zoom#readme
- Issues: https://github.com/yuchenbin1/vue-touch-zoom/issues
- npm.io page: https://npm.io/package/vue-touch-zoom

## Recent versions

- 1.0.7 (latest) — 2022-05-27
- 1.0.6 — 2022-05-27
- 1.0.5 — 2022-05-23
- 1.0.4 — 2022-05-20
- 1.0.3 — 2022-04-26
- 1.0.2 — 2022-03-25
- 1.0.1 — 2022-03-10
- 1.0.0 — 2022-03-10

## README

# Introduce

基于vue2.0，实现移动端容器内缩放与位移，缩放基于两指中心

Based on vue2.0, it realizes the scaling and displacement in the mobile terminal container, and the scaling is based on the two-finger center



![](http://img.souche.com/f2e/036d5220df9a7c123f155a4bcd34f574.gif)

# Getting started

1.Install the plugin


```bash
npm i vue-touch-zoom
```

or

```bash
yarn add vue-touch-zoom
```



2.Add the plugin into your app

```js
import Vue from 'vue'
import TouchZoom from 'vue-touch-zoom'

Vue.use(TouchZoom)
```

or

```js
import TouchZoom from 'vue-touch-zoom'

export default{
  components:{
    TouchZoom
  }
}
```

3.Usage

```html
<TouchZoom>
   <div></div>
</TouchZoom>
```

TouchZoom is external container,you can use `slot` to add inner content.

4.settings

```html
<TouchZoom :maxScale="2" :minScale="0.5">
   <div></div>
</TouchZoom>
```

| Name     | Type   | Solution                | Default  |
| -------- | ------ | ----------------------- | -------- |
| maxScale | Number | maximum grow multiple   | Infinity |
| minScale | Number | minimum shrink multiple | 0        |

# vue-touch-zoom

---
_Source: https://npm.io/package/vue-touch-zoom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._