点击图片显示画廊效果

看起来很复杂，实际上只是用到了v-show，v-show可以控制组件显示与否。其实项目不是最终目的，而是通过项目去掌握知识达到融汇贯通的效果。所以不要囫囵吞枣的将项目做完，而是时时反思。好了废话不多讲，先看效果图

 

 

可以发现图片是居中显示的，其他地方都是黑色背景，并且这还是一个轮播效果。emmmmm ，好复杂

---

解决办法

第一步

首先来结解决这个css的问题，如何将整个北京变为黑色？其实在之前做search功能就用到了。当然了，还有这个图片是居中显示的，这里使用了flex，其实很多地方可以用到flex，反正能用flex就用。这里总结一下，直接看代码吧

<style lang="stylus" scoped>
    .container
        display flex
        flex-flow column nowrap
        justify-content center
        position fixed
        left 0
        top 0
        bottom 0
        right 0
        background-color black
        .wrapper
            overflow hidden
            height 0
            padding-bottom 56%
            background-color white
            .img
                width 100%
</style>

第二步

可以发现这个轮播组件其实用的挺多的，并且在一个页面就显示了两个页面效果，这也可以拆分，以后再说

第三步

要想实现点击图片就显示画廊效果，就在图片上绑定事件，它可以改变某个值，然后在画廊上使用v-show，它使用相同的某个值去控制v-show显示。显示解决了，那么隐藏呢？这时在画廊的组件上也绑定一个事件，同样的可以改变某个值，然后去控制这个v-show的隐藏