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使用中,缩略图调整的主要内容,如果未能解决你的问题,请参考以下文章

vue-preview vue图片预览插件+缩略图样式

Blogger的JS函数代码中如何调整缩略图的默认分辨率?

调整 Woocommerce 购物车缩略图的大小

Discord 嵌入 - 调整缩略图

从照片库快速调整图像(ALAssets)的大小以获取缩略图

上传图片的三个版本,全尺寸、缩略图和调整大小