Normally Pleasant Mixture

    vue-pswipe
    TypeScript icon, indicating that this package has built-in type declarations

    0.15.3 • Public • Published

    vue-pswipe npm Build Status codecov

    a Vue plugin for PhotoSwipe without set image size

    online example

    Edit Vue Template

    install

    npm install vue-pswipe
    

    usage

    // main.js
    import Photoswipe from 'vue-pswipe'
    
    Vue.use(Photoswipe, options)

    see complete options

    you can set v-pswp directive in element to mark as clickable

    <Photoswipe>
        <img 
            :src="imageSrc"
            v-pswp="imageSrc"
        />
    </Photoswipe>

    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

    v-pswp: object|string

    use for mark current element as gallery item, accept image src or options object

    Directive Options:

    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

    beforeOpen

    emit after click thumbnail, if listen to this event, next function must be called to resolve this hook

    Parameters:

    • 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

    opened

    emit after photoswipe init, you can get current active photoswipe instance by parameter

    Parameters:

    • pswp:

      current photoswipe instance

    original PhotoSwipe event

    support all original PhotoSwipe events, see original event, eg:

    <Photoswipe @beforeChange="handleBeforeChange">
        <img 
            :src="imageSrc"
            v-pswp="imageSrc"
        />
    </Photoswipe>

    custom html

    In addition to using the <Photoswipe> 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.

    <template>
        <button @click="handleClick">open</button>
    </template>
    <script>
    export default {
        methods: {
            handleClick() {
                this.$Pswp.open({
                    items: [
                        {
                            html: '<div>hello vue-pswipe</div>'
                        }
                    ]
                })
            }
        }
    }
    </script>

    Vue.prototyp.$Pswp.open:

    type Open = (params: {
        items: PswpItem[],
        options?: PswpOptions
    }) => pswp

    dynamic import

    But cannot use vue.prototype.$Pswp.open()

    <script>
    export default {
        components: {
            Photoswipe: () => import('vue-pswipe')
                .then(({ Photoswipe }) => Photoswipe)
        } 
    }
    </script>

    example

    npm run dev
    

    License

    MIT

    Install

    npm i vue-pswipe

    DownloadsWeekly Downloads

    1,334

    Version

    0.15.3

    License

    MIT

    Unpacked Size

    1.52 MB

    Total Files

    38

    Last publish

    Collaborators

    • guoqichen