vue 关闭遮罩

Question

<div class="mark" v-show="markFlag!=0">
    <section class="exitLogin" v-show="markFlag==1">
       
    </section>
    <section class="reciveGoodsInfo" v-show="markFlag==2">
       
    </section>
    <section class="buyDiamond" v-show="markFlag==3">
    
    </section>
</div>

上面是遮罩的部分代码 中间3个section 是选项卡一类的东西大小只占遮罩中间一部分 如何实现点击遮罩没有内容的部分 关闭遮罩这个功能啊 放了个假发现忘了好多东西 老铁们给点思路

Answer 1

这样布局:

<style>
    .mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background: #000;
        z-index:2000;
    }
    .content{
        z-index:20001;
    }
</style>
<div class="mark" v-show="markFlag!=0">
    <div class="content">
        <section class="exitLogin" v-show="markFlag==1">
       
        </section>
        <section class="reciveGoodsInfo" v-show="markFlag==2">
           
        </section>
        <section class="buyDiamond" v-show="markFlag==3">
        
        </section>
    </div>
    <div class="mask"></div>
</div>

Answer 2

给遮罩绑定点击事件，点击时将markFlag 设置为0