使用vue-preview的步骤

效果：

小图

大图

1.安装插件

npm i vue-preview 

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.获取数据，与以前方法唯一不同就是出现了个msrc，只要把src值赋给它就好

 getThumbs(){
                                    this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id).then(result=>{
    if (result.body.status===0){
        result.body.message.forEach(item=>{
            item.w=600;
            item.h=400;
            item.msrc=item.src;  //关键点，赋值给它
        })
        this.list=result.body.message
     }else {
         alert("上传失败")
     }
}),
handleClose () {  //加上这个方法
    console.log('close event')
}

5.同时对图片列表的样式进行修改，这需要用到深层作用选择器
下面是我的样式表

.my-gallery {
	display: flex;
	flex-wrap:wrap;
}
.thumbs figure{
	width: 112px;  
	margin: 5px; 
}
.thumbs figure img {
	width: 100%;
	box-shadow: 0 0 8px #999;  
	border-radius: 5px; width: 100%;
	box-shadow: 0 0 8px #999;  
	border-radius: 5px;
}