1.首先安装插件
cnpm i vue-preview -S
2.在vue全局，也就是main.js声明插件
// 缩略图插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);
3.在组件里插入
<!-- 缩略图 -->
<div class="thumbs">
//list为你数据储存的地方，handleClose关闭缩略图执行的方法
<vue-preview :slides="list" @close="handleClose"></vue-preview>
</div>
4.获取数据
data(){
return{
// 获取当前页面的id
id:this.$route.params.id,
list:[]//缩略图数据
}
},
getlist(){
this.$http.get('api/getthumimages/'+this.id).then(result=>{
let data=result.body
if(data.status===0){
//循环数组的每一项给它加下面的属性
data.message.forEach(item => {
item.msrc = item.src;//外面的小图
item.w=600//设置以大图浏览时的宽度
item.h=400//设置以大图浏览时的高度
});
this.list=data.message
}
})
}
5.对图片列表的样式进行修改
.thumbs {
/deep/ .my-gallery {
//deep深层作用选择器
display: flex;
flex-wrap: wrap; //默认换行
figure {
width: 30%;
margin: 5px;
img {
width: 100%;
box-shadow: 0 0 8px #999;
border-radius: 5px;
}
}
}
}
