Vue 圖檔檢視大圖 放大縮小 vue-preview

DEMO：

Demo →

NPM：

# npm i vue-preview -S
           

main.js

import VuePreview from 'vue-preview'
 
Vue.use(VuePreview)

// Vue.use(preview, {
//   mainClass: 'pswp--minimal--dark',
//   barsSize: {top: 0, bottom: 0},
//   captionEl: false,
//   fullscreenEl: false,
//   shareEl: false,
//   bgOpacity: 0.85,
//   tapToClose: false,
//   tapToToggleControls: false
// })
           

Property	Description
src	main (large) image
msrc	small image
alt	image replacement text
w	image width
h	image height

例1：

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

例2：

<vue-preview class="preview" :slides="slide1" @close="handleClose" :style="{width::60 + 'px', height: 600 + 'px', 'z-index': 1000}"></vue-preview>
           

參考gitHub：https://github.com/LS1231/vue-preview