vue-preview 縮略圖

　　如果我們在 vue 中想使用縮略圖的話，可以使用 vue-preview 的插件

　　小圖的縮略

　　

　　大圖的樣式

　　

　　使用方法：vue-preview

　　下  載：　  npm i vue-preview

　　使用方法： 在 src 目錄中的 main.js 中使用

　　　　　　　import VuePreview from 'vue-preview'

　　　　　　　Vue.use(VuePreview)　

　　　　　　　在需要縮略圖的組件中，使用 

　　　　　　　　template 中 寫入

　　　　　　　　<div>

　　　　　　　　　　<vue-preview :slides="list" @close="handleClose"></vue-preview>

　　　　　　　　</div>

　　　　　　　備注：list 就是我們的圖片的循環

　　　　　　　在 script 中使用 的 exprot default {} 中的 data 中使用的 list 的數據格式

　　　　　　list: [

         　　　　　　 {

           　　　　　　　　 src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',

           　　　　　　　　 msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',

            　　　　　　　　w: 600,

           　　　　　　　　 h: 400

          　　　　　　},

         　　　　　　 {

           　　　　　　　　 src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',

        　　　　　　　　    msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',

            　　　　　　　　w: 1200,

           　　　　　　　　 h: 900

          　　　　　　}

        　　　　]

　　備注：這個 msrc ， w  ， h  這三個屬性是必填的，少一個都不行

　　vue-preview 的樣式只能是全局樣式，在局部均無法使用

　　這樣的話，我們的效果就可以在頁面中，能看出來，但是我們的排版需要注意，我們只能在 全局環境下進行排版，最好把下面的樣式變為公共樣式

　　

　　.my-gallery:after{

　　　　content:"";

　　　　display:block;

　　　　visibility: hidden;

　　　　clear:both;

　　　　height:0

　　}

　　.my-gallery figure{

　　　　width:100px;

　　　　height:100px;

　　　　float:left;

　　　　margin:.100px;

　　　　padding:0;

　　　　box-shadow:0 0 .100px #ccc;

　　　　}