Skip to content
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件
Branch: master
Clone or download
Latest commit f146cd5 Mar 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode update to 0.16.2 Mar 7, 2019
dist 0.17.1 fix error on macOS safari Mar 8, 2019
src 0.17.1 fix error on macOS safari Mar 8, 2019
.babelrc 边框回弹完善中 Mar 7, 2018
.editorconfig
.gitignore
LICENSE
QRcode.png
README.cn.md update readme Mar 21, 2019
README.md Update README.md Mar 21, 2019
index.html
index.js
index.js.map 0.17.1 fix error on macOS safari Mar 8, 2019
package-lock.json
package.json
start.bat
webpack.config.js

README.md

img-vuer

An Mobile-First image viewer for Vue2

中文 README


🙆 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()

💻 v0.17.1 compatible with PC

Now you can use both Mobile and PC 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>

API

api arg description
close() / close the viwer
onIndexChange() cb $imgVuer.onIndexChange((newVal, oldVal)=>{...})
onToggle() cb on close or on open $imgVuer.onToggle((newVal, oldVal)=>{...})
changeBGColor() color change the background color of viwer $imgVuer.changeBGColor('#fff')
next() / switch to next image $imgVuer.next()
prev() / switch to previous image $imgVuer.prev()
getCurrentIndex() / /

Development

# development environment node v6.15.1

# 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"
/>

for a large number of large images

If you group a large number of large images, img-vuer will load all image in the same group, so it will cause unnecessary mobile data traffic and slow the page down.

You can use (only)v0.17.2 in this situation and img-vuer will only load the image you watched.

key

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

License

MIT

You can’t perform that action at this time.