vue-preview的使用（清新脱俗）

1.首先安装插件

cnpm i vue-preview -S

2.在vue全局，也就是main.js声明插件

// 缩略图插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

3.在组件里插入

 <!-- 缩略图 -->
      <div class="thumbs">
          //list为你数据储存的地方，handleClose关闭缩略图执行的方法
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
      </div>

4.获取数据

data(){
    return{
        // 获取当前页面的id
        id:this.$route.params.id,
        list:[]//缩略图数据
    }
},
getlist(){
        this.$http.get('api/getthumimages/'+this.id).then(result=>{
            let data=result.body
            if(data.status===0){
                //循环数组的每一项给它加下面的属性
                data.message.forEach(item => {
                    item.msrc = item.src;//外面的小图
                    item.w=600//设置以大图浏览时的宽度
                    item.h=400//设置以大图浏览时的高度
                });
                this.list=data.message
            }
        })
    }

5.对图片列表的样式进行修改

.thumbs {
    /deep/ .my-gallery {
      //deep深层作用选择器
      display: flex;
      flex-wrap: wrap; //默认换行
      figure {
        width: 30%;
        margin: 5px;
        img {
          width: 100%;
          box-shadow: 0 0 8px #999;
          border-radius: 5px;
        }
      }
    }
  }