0.0.4 ā¢ Published 5 years ago
@everlastlucas/imgviewer v0.0.4
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
- Import to your project and install it by
Vue.use()
function.
import Vue from 'vue';
import imgViewer from '@everlastlucas/img-viewer';
Vue.use(imgViewer);
- 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.
- 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.