1.安装
npm i vue-preview -S
2.在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: true,tapToToggleControls: false
})
3.使用
<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>
| Property |
Description |
| src |
main (large) image |
| msrc |
small image |
| alt |
image replacement text |
| w |
image width |
| h |
image height |
4.效果图
