img-vuer
My Modification
a fork of img-vuer,please see the link before. I just add a api invoking mehtod.
V0.19.2 bugfix 双指缩放依然触发singleTap事件,导致modal关闭
V0.19.1 bugfix
V0.19.0 add a api invoking method
/*
options:如下
renderFns 支持传入两个render函数分别渲染在header/footer处,用于显示附加信息
ctx 目前传入了一个currentIndex属性,为当前索引
*/
this.$imgVuer.open(options: Object, renderFns: Object)
this.$imgVuer.open(
{
imgs: Array<String>, // img array
initialIndex: Number, // inital index begin with 0
onChange: Function, // index change event
onClose: Function // close event
},
//
{
header: (h, ctx) => {
return h('div', `header`);
},
footer: (h, ctx) => {
return h('div', `footer`);
}
}
)
original README
An Mobile-First image viewer for Vue2
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()
Now you can use both Mobile and PC Browser
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
isIndexShow: true, // show image index
useCloseButton: false, // trigger gallery close with only close button
})
<!-- 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