效果图
点击图片后的效果如下
步骤
1、创建一个画廊组件Gallary.vue
2、在Gallary.vue组建中插入swiper滚动效果的标签
注释：图片是从父组件中传入的
3、从父级组件中引入图片
4、循环展示打印图片
5、图片下方数子的设置
5.1、使用pagination
官网：https://pagination.com/
这个管网里有一些设置
5.2、在swiper标签设置 :options属性
5.3、在data中设置pagination的一些要求格式
observeParents: true,
observer: true
这两个可以在官网中搜得到
6、设置画廊初始是隐藏的
位置：哪个组件调用了这个组件，就在那个组件中设置初始值为false
通过v-show来设置画廊的隐藏
再在data中设置具体的值
7、画廊的点击事件（展开和关闭事件）
7.1、展开
位置：在父组件中设置一个click事件
触发这个click事件后，画廊展开
具体的代码就是把showGallary的值设置为true
7.2、关闭
子组件
位置：本组件中设置点击事件
当点击事件触发后，又会触发另一个事件的发生
另一个事件又是和父组件是有联系的，使用$emit在使父子组件联系在一起
这个事件的方法中写一个触发事件
父组件
紧接着就是回到了父组件中的@Close事件
这个事件就会使画廊关闭
