Vue Photoswipe plugin
一 A Vue Integrated PhotoSwipe Image Preview Plugin
Requirements
Installation
npm i vue-photoswipe -SUsage
Support
| Supported Package | Version |
|---|---|
| Vue | 2.5+ |
Install plugin
import VuePhotoswipe from 'vue-photoswipe'
// defalut install
Vue.use(VuePhotoswipe)
// with parameters install
Vue.use(preview, {
mainClass: 'pswp--minimal--dark',
barsSize: {top: 0, bottom: 0},
captionEl: false,
fullscreenEl: false,
shareEl: false,
bgOpacity: 0.85,
tapToClose: true,
tapToToggleControls: false
})Examples
<template>
<vue-preview :slides="slide1" @close="handleClose" :fallback="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"></vue-preview>
</template>
<script>
export default {
data () {
return {
slide1: [
{
src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
alt: 'picture1',
title: 'Image Caption 1',
w: 600,
h: 400
},
{
src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
alt: 'picture2',
title: 'Image Caption 2',
w: 1200,
h: 900
}
]
}
},
methods: {
handleClose () {
console.log('close event')
}
}
}
</script>Prop
Property
| Property | Description |
|---|---|
| slides | Image data |
| fallback | Default image - if image is not found, will display fallback image instead |
slide item options
| Property | Description |
|---|---|
| src | main (large) image |
| msrc | small image |
| alt | image replacement text |
| w | image width |
| h | image height |
Events
| Event name | Description | parameter |
|---|---|---|
| close | close gallery | nothing |
License
MIT Copyright (c) 2018 TriDiamond
