在使用vue-preview遇到的坑。

自学的教程比较老，所以vue-preview的使用方法是错了，就到GitHub上查询，得到这个东西更新了用法。

首先先安装插件

cnpm i vue-preview 

在vue全局，也就是main.js声明插件

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

在组件里插入

 <div class="thumbs">
        <vue-preview :slides="list" @close="handleClose"></vue-preview>    
        //list为你数据储存的地方，handleClose在下面组件方法里面设置
        </div>

获取数据，与以前方法唯一不同就是出现了个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')
            }

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

 .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;
                  }
              }
          }
        }

效果