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