[Vue]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，修改第三方组件的样式。

//deep深层作用选择器在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.
使用方法：

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

参考：https://blog.csdn.net/weixin_45842655/article/details/103547362

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

来源：CSDN

作者：iChangebaobao

链接：https://blog.csdn.net/iChangebaobao/article/details/103905565

标签

vue

deep