vue-preview移动端图片全屏详细查看

Posted 2021-01-03 eva67

1.下载安装

npm install vee-preview --save

2.main.js 添加

 

//图片浏览插件

import VuePreview from ‘vue-preview‘

3.组件template中使用

<vue-preview :slides="slide1"></vue-preview>

 

 

 4.定义data里面的数据数组,包括图片地址,大小等

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

　　　　　　　　}

　　　　　　]

　　　　}

　　},