1.安装vue-preview
cnpm i vue-preview -S
2.在main.js入口引入：
import VuePreview from ‘vue-preview’
Vue.use（VuePreview）
3.组件使用

<vue-preview :slides=“list” @close=“handleClose”>

4.获取数据相关信息： getThumbs(){ //获取图片索缩图 this.$http.get("http://api.wangshuwen.com/getNews").then(result=>{ if(result.body.code === 1){

               result.body.data.forEach(item=>{
                   item.w = 600;
                   item.h = 400;
                   item.src = item.pic;
                   item.msrc = item.pic;
               })  
            this.list = result.body.data      
        }
    })
 },
handleClose () {
    console.log('close event')
  }

注意：vue-preview有四个属性必须设置: w(大图宽),h(大图高),src(大图),msrc(小图)
5.设置css样式：
.thumbs{
/deep/ .my-gallery{
display:flex;
flex-wrap:wrap;
figure{
width:30%;
margin:5px;
img{
width:100%
}
}
}

}