vue-preview使用中，縮略圖調整

npm i vue-preview -S

mian.js入口中引入

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

組件中引入

<div class="thumbs">
<vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</div>
1
2
3
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");
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
設置縮略圖CSS樣式
設置CSS

.thumbs {
/deep/ .my-gallery {
display: flex;
flex-wrap: wrap;
figure {
width: 30%;
margin: 5px;
img {
width: 100%;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

---------------------