@everlastlucas/imgviewer

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

Install

npm install @everlastlucas/imgviewer

How to use

1. Import to your project and install it by Vue.use() function.

import Vue from 'vue';
import imgViewer from '@everlastlucas/img-viewer';

Vue.use(imgViewer);

1. Add the v-viewer directive to your <img> DOM like this:

<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:

<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.

1. Enjoy it in mobile browser.

Development Progress

• DoubleTap to zoom.
• Group images supports, slide to switch image.
• Lazy load.
• Pinch to resize.
• Rotate by gesture.

License

MIT