vue 自定义弹框样式

业务场景：

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

//考虑到元素垂直居中问题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;
    }
  }
}