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

Answer 2

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