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;

　　　　}

　

 

来源：https://www.cnblogs.com/shangjun6/p/11323866.html