vue-preview使用中，缩略图调整

1. npm i vue-preview -S

2. mian.js入口中引入

   import VuePreview from ‘vue-preview’
   Vue.use(VuePreview)

3. 组件中引入

<div class="thumbs">
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</div>

4.获取数据和设置关闭信息

getPhotominInfo() {
      this.$ajax
        .get("/getphotomininfo/", {
          params: {
            ID: this.id
          }
        })
        .then(response => {
          //循环每个图片数据,补全图片的宽和高
          response.data.message.forEach(item => {
            item.msrc = item.src;
            item.w = 600;
            item.h = 400;
          });
          this.slide1 = response.data.message;
          console.log(this.slide1);
        })
        .catch(error => {
          console.log(error);
          Toast({
            message: "获取缩略图图片失败..."
          });
        });
    },
    handleClose() {
      console.log("close event");
    }
  },

5. 设置缩略图CSS样式

设置CSS

.thumbs {
  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;
    figure {
      width: 30%;
      margin: 5px;
      img {
        width: 100%;
      }
    }
  }
}