vue 自定义弹框样式

业务场景：

页面内显示多张图片，点击图片能够以幻灯片形式（卡片）放大查看，点击图片能够保存本地

<div class="cover" v-show="isCover" ></div>
<div class="custom_container"  v-show="isLoopPicture" @click.self="hidePop">
  <span class="close-pop" @click="hidePop"><i class="el-icon-close"></i></span>
  <el-carousel :interval="0" type="card" class="custom-carousel">
    <el-carousel-item v-for="(item,index) in currentImgArr" :key="index" class="custom_carousel_item">
      <img :src="item.url" alt="">
    </el-carousel-item>
  </el-carousel>
</div>

//考虑到元素垂直居中问题custom_container使用display:flex

.custom_container{
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  position: absolute;
  top:0;
  left:0;
  z-index: 99;
}

受.custom_container宽高影响，不能点击到.cover(.cover只作为蒙版背景)
给.custom_container直接添加@click='hidePop'事件 受事件捕获影响，子元素点击也触发hidePop事件，
子元素不能进行点击操作
解决方法：给.custom_container自身添加点击事件: @click.self='hidePop'

export default{
  data(){
    return{
      isCover:false,
      isLoopPicture:false
    }
  },
  methods:{
    hidePop(){
      this.isCover=false;
      this.isLoopPicture=false;
    }
  }
}