vue-preview移動端圖片全屏詳細查看

標籤：main   --   pre   import   資料   template   rom   ict   移動端   

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　　　　　　　　}　　　　　　]　　　　}　　},

vue-preview移動端圖片全屏詳細查看