a vue plugin for photoswipe
npm install vue-pswipe
npm install vue-pswipe
`usage
`js
// main.js
import Photoswipe from 'vue-pswipe'Vue.use(Photoswipe, options)
`
see complete optionsyou can set
v-pswp directive in element to mark as clickable
`vue
:src="imageSrc"
v-pswp="imageSrc"
/>
`props
| Property | Type | Description | Default |
| --- | --- | --- | --- |
| options | object | original PhotoSwipe options, see complete options | - |
| auto | boolean | automatically collect all img tags without the need for the
v-pswp directive | false |
| bubble | boolean | allow click event bubbling | false |
| lazy | boolean | lazy loading image, you can set to false to preload all image | true |
| rotate | boolean | add a rotate action button to the top bar, allow user to rotate the current image | false |directive
$3
use for mark current element as gallery item, accept image src or options objectDirective Options:
`typescript
interface PswpDirectiveOptions {
/**
* path to image
*/
src: string
/**
* image size, 'width x height', eg: '100x100'
*/
size?: string
/**
* small image placeholder,
* main (large) image loads on top of it,
* if you skip this parameter - grey rectangle will be displayed,
* try to define this property only when small image was loaded before
*/
msrc?: string
/**
* used by Default PhotoSwipe UI
* if you skip it, there won't be any caption
*/
title?: string
/**
* to make URLs to a single image look like this: http://example.com/#&gid=1&pid=custom-first-id
* instead of: http://example.com/#&gid=1&pid=1
* enable options history: true, galleryPIDs: true and add pid (unique picture identifier)
*/
pid?: string | number
}
`event
$3
emit after click thumbnail, if listen to this event, next function must be called to resolve this hookParameters:
-
event:
- index: current image index
- target: the target that triggers effective click event
- next: must be called to resolve the hook.
next(false) will abort open PhotoSwipe$3
emit after photoswipe init, you can get current active photoswipe instance by parameterParameters:
-
pswp: current photoswipe instance
$3
support all original PhotoSwipe events, see original event, eg:
`vue
:src="imageSrc"
v-pswp="imageSrc"
/>
`custom html
In addition to using the tag, you can also use Vue.prototype.$Pswp.open(params) to directly open a PhotoSwipe. This is especially useful in the case of Custom HTML Content in Slides.
`vue
`Vue.prototyp.$Pswp.open:
`typescript
type Open = (params: {
items: PswpItem[],
options?: PswpOptions
}) => pswp
`dynamic import
But cannot use vue.prototype.$Pswp.open()
`vue
`example
`
npm run dev
``