展示該組件時，同時展示一個透明的div。div在組件下方，覆蓋整個頁面。
給div增加一個點擊監(jiān)聽事件。監(jiān)聽到點擊時，傳給父組件，讓其隱藏當前組件。

<template>
  <div>
    <div class="detail-card" @click="hideCard"></div>
    <img :src="src" alt="" class="card">
  </div>
</template>

將點擊事件傳給父組件

hideCard(){
  this.$emit('hideCard')
}

父組件中，通過v-show來控制顯示隱藏

    <DetailCard v-show="isShare" @hideCard="hideCard"  />

      hideCard(){
        this.isShare = false
      }

子組件布局：

  .detail-card{
    height: 100%;
    width: 100%;
    z-index: 9;
    position: absolute;
    top: 0px;
  }
  .card{
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(100,100,100,0.2);
    border-radius: 20px;
    z-index: 10;
  }

效果展示