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
---------------------