1.首先安装 vue-preview 插件

npm i vue-preview -S

2.然后在 mian.js入口中引入

import VuePreview from ‘vue-preview’

Vue.use(VuePreview)

组件：

<div class="thumbs">

  <vue-preview :slides="details" class="preview" >

</div>

script 部分

data() {

return {

id:this.$route.params.id,//从路由中获取的图片id

    details: [],//缩略图的数组

  }

},

created() {

  this.setPreview();

},

methods: {

getPhotoInfo() {

axios.get('/api/getimageInfo/' +this.id).then(res => {

if (res.data.status ==0) {

this.photoInfo = res.data.message[0];

      }

})

},

  setPreview:function () {

axios.get('/api/getthumimages/' +this.id).then(res => {

if (res.data.status ==0) {

res.data.message.forEach(item => {

item.w =600;

          item.h =400;

          item.msrc = item.src;

        });

        //把完整的数据保存到 details中

        this.details = res.data.message;

      }

})

}

},

style部分

.thumbs {

/deep/ .my-gallery {

display:flex;

    flex-wrap:wrap;

    figure {

width:30%;

      margin:5px;

      img {

width:100%;

box-shadow:0 0 8px #999;

      }

}

}

以上完成后，就可以看到有样式的缩略图了