公用图片画廊组件（vue）

效果图

点击图片后的效果如下

步骤

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事件
这个事件就会使画廊关闭