vue-preview使用中,缩略图调整
npm i vue-preview -Smian.js入口中引入import VuePreview from ‘vue-preview’Vue.use(VuePreview)组件中引入<div class="thumbs"><vue-preview :slides="slide1" @close="handleClose"></vue...
·
-
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>
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");
}
},
- 设置缩略图CSS样式
设置CSS
.thumbs {
/deep/ .my-gallery {
display: flex;
flex-wrap: wrap;
figure {
width: 30%;
margin: 5px;
img {
width: 100%;
}
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)