鍍金池/ 問(wèn)答/HTML/ vue 關(guān)閉遮罩

vue 關(guān)閉遮罩

<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個(gè)section 是選項(xiàng)卡一類(lèi)的東西大小只占遮罩中間一部分 如何實(shí)現(xiàn)點(diǎn)擊遮罩沒(méi)有內(nèi)容的部分 關(guān)閉遮罩這個(gè)功能啊 放了個(gè)假發(fā)現(xiàn)忘了好多東西 老鐵們給點(diǎn)思路

回答
編輯回答
孤慣

給遮罩綁定點(diǎn)擊事件，點(diǎn)擊時(shí)將markFlag 設(shè)置為0

2017年10月30日 12:31
編輯回答
背叛者

這樣布局:

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

圖片描述

2017年2月27日 00:58