vue-preview使用中，缩略图调整
Posted liyanyan665
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
---------------------
以上是关于vue-preview使用中，缩略图调整的主要内容，如果未能解决你的问题，请参考以下文章