# @everlastlucas/imgviewer

> A tiny image preview component by Vue.js2.x

Latest version **0.0.4** (published 2019-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @everlastlucas/imgviewer
pnpm add @everlastlucas/imgviewer
yarn add @everlastlucas/imgviewer
bun add @everlastlucas/imgviewer
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-02-21 |
| First published | 2019-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 39.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Lucas |
| Maintainers | everlastlucas |
| Keywords | vue, previewer, vue-plugin |

## Links

- npm: https://www.npmjs.com/package/@everlastlucas/imgviewer
- npm.io page: https://npm.io/package/@everlastlucas/imgviewer

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.6
- [alloyfinger](https://npm.io/package/alloyfinger.md) ^0.1.16

## Recent versions

- 0.0.4 (latest) — 2019-02-21
- 0.0.3 — 2019-02-14
- 0.0.2 — 2019-02-13
- 0.0.1 — 2019-02-12

## README

# ImgViewer
A tiny image preview component by Vue.js2.x.

This project is buiding in progress and it couldn't be used in production environment temperarily.

## Features
🎊 Simple and easy to use

🚀 Born for mobile

🎹 Based on directive

## Screenshot
![viewer](http://img.lxzmww.xyz/ImgViewer.gif)


## Install
```
npm install @everlastlucas/imgviewer
```

## How to use
1. Import to your project and install it by `Vue.use()` function.
```javascript
import Vue from 'vue';
import imgViewer from '@everlastlucas/img-viewer';

Vue.use(imgViewer);
```

2. Add the `v-viewer` directive to your `<img>` DOM like this:
```html
<img src="http://img.lxzmww.xyz/cnode/qrcode.jpg" v-viewer>
```

If you want to divide some images into a group, please specify group-name as a param like this:
```html
<img src="http://img.lxzmww.xyz/cnode/qrcode.jpg" v-viewer:group1>
<img src="http://img.lxzmww.xyz/cnode/qrcode.jpg" v-viewer:group1>
```
Then, you can swipe to swich a image.

3. Enjoy it in mobile browser.

## Development Progress
- [x] DoubleTap to zoom.
- [x] Group images supports, slide to switch image.
- [x] Lazy load.
- [ ] Pinch to resize.
- [ ] Rotate by gesture.

## License
[MIT](https://github.com/logcas/ImgViewer/blob/master/README.md)

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