2020-08-10-vue-preview的使用以及坑

vue-preview的使用以及坑

首先贡献 vue-preview 的地址，如下

https://github.com/LS1231/vue-preview

vue-preview 的使用说明

<template>
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</template>
 
<script>
export default {
    data () {
      return {
        slide1: []
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

按照如上的 引用，会出现一个问题，照片无法正常加载，点击后却有放大的效果
解决方法，我们只要将 src的内容赋值给msrc就可以（对照github的例子，发现缺缺少msrc这个属性），代码如下

getThumbs() {
 // 获取缩略图
  this.$http.get('api/getthumimages/'+this.id).then( result=> {
      if (result.body.status === 0) {
         result.body.message.forEach(item =>{
             item.msrc = item.src
             item.alt= 'picture2'
             item.title = 'Image Caption 2'
         })

      }
      this.slide1 = result.body.message
      console.log(this.slide1)
  })
},
 

现在图片已经可以正常的显示，但是却无法对图片进行样式修改，附上如下的代码

<!--  缩略图区域  -->
<div class="thumbs">
    <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</div>

样式修整

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

拓展： /deep/ 深度选择器的使用场景：
vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时可通过/deep/操作符 穿透scoped，修改第三方组件的样式。

className{
	/deep/  第三方组件的className {
	    样式
	}
}
 

版权声明：本文为CSDN博主「聪明可爱小轩轩」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43238599/article/details/97546736