转！！！在使用vue-preview遇到的坑

来源：https://blog.csdn.net/weixin_42628334/article/details/93140010

自学的教程比较老，所以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('api/getthumimages/' + this.id).then(res => {
        if (res.body.status === 0) {
          res.body.message.forEach(item => {
            item.msrc = item.src;
            item.w = 600;//这是设置打开的缩略图
            item.h = 400;
            item.alt = 'picture' + this.id;
            item.title = 'Image Caption ' + this.id;
          })
        }
        this.list = res.body.message;
      })
 },

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

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