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%;       }     }   } } 

文章来源: https://blog.csdn.net/an501920078/article/details/92393289