Vue-preview，找不到open等报错解决

Vue-preview，找不到open等报错解决

由于是大部分学习的是老版本，而现在已经改为新版本，则会报错

1.配置

import Vuepreview from 'vue-preview'
Vue.use(Vuepreview)

2.使用

 <div class="thumbs">
        <vue-preview :slides="photolist" @close="handleClose"></vue-preview>    
      
        </div>

在新版本中，需要使用 vue-preview 并且在 :slides后面是你的数据数组

if(data.status === 0){
                data.message.forEach(item => {
          item.w = 600;
          item.h = 400;
          item.msrc = item.src;
        });

改动最大的，则是item.msrc = item.src 把你遍历的图片地址赋值给item.msrc,则能够遍历出你的图片

handleClose () {  //可以选择加上这个方法
                console.log('close event')
            }

这个方法可加可不加

最后改变CSS

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

一定要加深层作用器 或者 去除scoped 否则图片样式得不到改变

最后附上整个源码

<template>
    <div class="photo">
        <h1 class="title">{{ photoinfo.title }}</h1>
        <p  class="info">
        <span>发表时间:{{ photoinfo.add_time | dateFormat}}</span>
        <span>点击册数：{{photoinfo.click}}</span>
        </p>
        <hr>

       <div class="thumb-img-list">
      <!-- 使用 v-for 循环渲染缩略图 -->
      <div class="thumbs">
        <vue-preview :slides="photolist" @close="handleClose"></vue-preview>    
      
        </div>


    </div>

    <div class="content" v-html="photoinfo.content"></div>
        <comment :newsid="id"></comment>
        
    </div>
</template>

<script>
import comment from '../sub-conponents/Comment.vue'
// import mui from '../../../lib/mui/js/mui.previewimage.js'
// import '../../../lib/mui/js/mui.zoom.js'
export default {
    data(){
        return {
            photoinfo:{},
            photolist:[]
        };
    },
    created(){
        this.getPhotoinfo()
        this.getThumbimg()
    },
    methods: {
        async getPhotoinfo(){
            const {data} = await this.$http.get('/api/getimageInfo/'+this.id)
            if(data.status === 0) return this.photoinfo = data.message[0]
        },
        async getThumbimg(){
            const {data} = await this.$http.get('/api/getthumimages/'+this.id)
            if(data.status === 0){
                data.message.forEach(item => {
          item.w = 600;
          item.h = 400;
          item.msrc = item.src;
        })
            this.photolist = data.message
            }
            
        },
         handleClose () {  //加上这个方法
                console.log('close event')
            }
       
        
    },
    
     props: ["id"],
  components: {
    comment
  }

}
</script>


<style lang="scss" scoped>
    .title{
        font-size: 15px;
        text-align: center;
        margin:10px 0;
        color:blue;
    }
    .info{
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    .photo{
        padding:3px;
    }
    .thumb-img-list{
        img{
            width: 100px;
        }
    }
    .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;
                  }
              }
          }
        }

</style>

最后就能成功的显现出来啦！