A vue-photoswipe-preview on phtotswipe
# npm install vue-photoswipe-preview -save
import PhotoswipePreview from 'vue-photoswipe-preview'
Vue.use(PhotoswipePreview)
It's used in template like this.
其中 img标签 class 名 preview-img-item 为必须。
`<template>
<div id="app">
<div class="preview-img-list">
<img class="preview-img-item" v-for="(item, index) in items"
:src="item.src" @click="$photoswipe.open(index, items)">
</div>
</div>
</template>`
data () {
return {
items: [{
src: require('./assets/Chrysanthemum.jpg') ,
w: 1024,
h: 768
}, {
src: require('./assets/Desert.jpg'),
w: 1024,
h: 768
}, {
src: require('./assets/Hydrangeas.jpg'),
w: 1024,
h: 768
}, {
src: require('./assets/Jellyfish.jpg'),
w: 1024,
h: 768
}, {
src: require('./assets/Koala.jpg'),
w: 1024,
h: 768
}, {
src: require('./assets/Lighthouse.jpg'),
w: 1024,
h: 768
}, {
src: require('./assets/Penguins.jpg'),
w: 1024,
h: 768
}, {
src: require('./assets/Tulips.jpg'),
w: 1024,
h: 768
}]
}
}
params : index 图片的索引 ,items 全部图片的列表 ,
$photoswipe.close()
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).