展示该组件时，同时展示一个透明的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;
}
效果展示
