zoukankan      html  css  js  c++  java
  • deep深度作用选择器作用及使用(Vue教程-黑马-图片缩略图)

    <!-- 缩略图区域 -->
            <div class="thumbs">
                <vue-preview :slides="list" @close="handleClose"></vue-preview>
            </div>
    getThumbs(){
                this.$http.get('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;
                        });
                        // 把完整的数据保存到 list 中
                        this.list = result.body.message;
                    }
                })
            },
            handleClose(){
                console.log("close event")
            }
        },
    .thumbs{
            ::v-deep .my-gallery{
            display: flex;
            flex-wrap: wrap;
            figure{
                width: 30%;
                margin: 5px;
                img{
                    width: 100%;
                    box-shadow: 0,0,8px,#999;
                    border-radius: 5px;
                }
            }
        }
    }

    注意上面的  ::v-deep  是深度选择器,有的时候也以写成其他形式,下面是官方说明:

  • 相关阅读:
    撕衣服
    寒假作业1编程总结。
    C Traps and Pitfallss
    《彻底搞定C指针》文档整理
    C语言中内存分配 (转)
    ASCII
    ipad
    tour
    Diet
    第7章 输入与输出
  • 原文地址:https://www.cnblogs.com/ccv2/p/12558618.html
Copyright © 2011-2022 走看看