使用vue-preview 缩略图预览 完美解决

vue-preview是基于vue的缩略图预览插件,点击小图可以预览放大效果.

首先先安装插件

cnpm i vue-preview -S

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

效果


最后尝试了下handleClose函数可以不写,不影响.
声明:本文转自https://blog.csdn.net/weixin_42628334/article/details/93140010