vue点击其它地方隐藏组件

展示该组件时，同时展示一个透明的div。div在组件下方，覆盖整个页面。
给div增加一个点击监听事件。监听到点击时，传给父组件，让其隐藏当前组件。

<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;
  }

效果展示