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.
🎊 Simple and easy to use
🚀 Born for mobile
🎹 Based on directive
npm install @everlastlucas/imgviewer
- 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-viewerdirective 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.
- DoubleTap to zoom.
- Group images supports, slide to switch image.
- Lazy load.
- Pinch to resize.
- Rotate by gesture.