rayner-jw / img-vuer

An image viewer for mobile base on Vue2 / 一个移动端专用的 Vue2 图片预览插件

img-vuer

An image viewer base on Vue.js for mobile

🙆‍♀️ Easy to use

👉 Swipe gesture

🔍 Zoom gesture

V0.11.0 Now you can use thumbnail~

V0.13.0 Gallery hide when the physical back button is pressed (android device only)

V0.15.0 Fix blurry after using scale()

Please Use Mobile Browser 😆

live demo

or scan the QRcode

Install

npm i img-vuer --save

Usage

// import img-vuer and install
import gallery from 'img-vuer'
Vue.use(gallery, { 
  swipeThreshold: 150  // default 100 ,new in 0.12.0
})

<!-- add direact to <img> -->
<img v-gallery :src="...">

<!-- group images -->
<img v-gallery:groupName :src="...">
<img v-gallery:groupName :src="...">
<img v-gallery:groupName :src="...">

<!-- OR ( dynamic bind ) -->
<img v-gallery="'groupName'" :src="...">

<!-- use thumbnail, new in 0.11.0 -->
<img v-gallery :src="thumbnailSrc" data-large="originSrc">

<!-- trigger close gallery, new in 0.14.0 -->
<button @click="$imgVuer.close()">close</button>

Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Troubleshooting

Abnormal with page scale

Add meta

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0, maximum-scale=1">

Should not use index as key for the component which is added v-gallery.

License

MIT