Vue preview plugin

一 A Vue Integrated PhotoSwipe Image Preview Plugin

Requirements

PhotoSwipe

Demo

Live Demo >>

Installation

npm i vue-tk-preview -S

Usage

Notice:

• This plugin currently support vue2.5 and above

Install plugin

import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

// 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"></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

slide item options

| Property | Description | :--- | :--- | src | main (large) image | msrc | small image | alt | image replacement text | w | image width | h | image height | name | 区分多个画廊插件 | show | 是否显示当前的列表(空接) |index | 直接打开某张图片 以下标0开始

Events

| Event name | Description | parameter | :--- | :--- | :--- | close | close gallery | nothing

License

MIT Copyright (c) 2018 liusong