# vue-zoomer

> Zoom the image or other thing with mouse or touch

Latest version **0.3.10** (published 2022-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-zoomer
pnpm add vue-zoomer
yarn add vue-zoomer
bun add vue-zoomer
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.10 |
| Published | 2022-03-11 |
| First published | 2019-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 150 |
| Author | Jarvis Niu |
| Maintainers | jarvisniu |
| Keywords | zoom, zoomer, image, vue |

## Links

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

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.3.10 (latest) — 2022-03-11
- 0.4.0-beta.2 (next) — 2022-03-11
- 0.4.0-beta.1 — 2021-01-05
- 0.3.9 — 2021-01-04
- 0.3.8 — 2021-01-04
- 0.3.7 — 2020-12-22
- 0.3.6 — 2019-10-25
- 0.3.5 — 2019-10-25
- 0.3.4 — 2019-08-28
- 0.3.3 — 2019-08-20
- 0.3.2 — 2019-08-06
- 0.3.1 — 2019-06-15
- 0.3.0 — 2019-06-03
- 0.2.11 — 2019-05-31
- 0.2.10 — 2019-05-31
- … 13 more at https://npm.io/package/vue-zoomer/versions

## README

# vue-zoomer

> Zoom the image or other thing with mouse or touch

## For Vue 3

This library has released a Vue 3 beta version [here](https://github.com/jarvisniu/vue-zoomer/tree/next).

## Demo

- [Single Image](https://unpkg.com/vue-zoomer/dist/demo/basic.html) -
  [(src)](https://github.com/jarvisniu/vue-zoomer/blob/master/demo/basic/app.vue)
- [Gallery](https://unpkg.com/vue-zoomer/dist/demo/gallery.html) -
  [(src)](https://github.com/jarvisniu/vue-zoomer/blob/master/demo/gallery/app.vue)

## Usage

Install:

```bash
npm install vue-zoomer
```

Import and register globally:

```js
import Vue from 'vue'
import VueZoomer from 'vue-zoomer'

Vue.use(VueZoomer)
```

Import and register locally (after `v0.3.10`):

```html
<!-- page1.vue -->
<script>
import VueZoomer from 'vue-zoomer'

export default {
  components: {
    VZoomer: VueZoomer.Zoomer,
    VZoomerGallery: VueZoomer.Gallery,
  },
}
</script>
```

You can also import the source files (after `v0.3.10`), rather than
the minified umd bundle, for better debugging experience:
```js
import VueZoomer from 'vue-zoomer/src'
```

Single usage:

```html
<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;">
  <img
    src="./assets/landscape-1.jpg"
    style="object-fit: contain; width: 100%; height: 100%;"
  >
</v-zoomer>
```

Gallery usage:

```html
<v-zoomer-gallery
  style="width: 100vw; height: 100vh;"
  :list="['a.jpg', 'b.jpg', 'c.jpg']"
  v-model="selIndex"
></v-zoomer-gallery>
```

## API

### &lt;v-zoomer&gt; Props

- `maxScale: number` - Maximum scale limit, default is 5;
- `minScale: number` - Minimum scale limit, default is 1;
- `zoomed: out boolean` - Whether zoomed in (scale equals to 1). `out` means the prop is a child to parent one-way binding. So there must have a `.sync` modifier.
- `pivot: 'cursor' | 'image-center'` - The pivot when zoom the content, default is `cursor`, can set to be `image-center`;
- `zoomingElastic: boolean` - Whether to use the elastic effect when reaching the max/min zooming bounds, default is `true`;
- `limitTranslation: boolean` - Whether to limit the content into the container, default is `true`;
- `doubleClickToZoom: boolean` - Whether to zoom in/out the content by double click, default is `true`;
- `mouseWheelToZoom: boolean` - Whether to zoom in/out the content by mouse wheel, default is `true`;

### &lt;v-zoomer&gt; Methods

- `reset()` - Reset the scale and translate to the initial state.
- `zoomIn(scale=2)` - Zoom in.
- `zoomOut(scale=0.5)` - Zoom out.

### &lt;v-zoomer-gallery&gt; Props

- `list: Array<string> required` - Displaying image urls;
- `v-model(value): number required` - Index of current showing image;
- `pivot: 'cursor' | 'image-center'` - Same as above;
- `zoomingElastic: boolean` - Same as above;
- `limitTranslation: boolean` - Same as above;
- `doubleClickToZoom: boolean` - Same as above;
- `mouseWheelToZoom: boolean` - Same as above;

### &lt;v-zoomer-gallery&gt; Methods

- `reset()` - Reset the scale and translate to the initial state.
- `zoomIn(scale=2)` - Zoom in.
- `zoomOut(scale=0.5)` - Zoom out.

## License

MIT

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