【记录】
使用v-show给遮罩层设定展示条件,当盒子处于显示时,遮罩层也一起显示,z-index大于body小于盒子即可,点击遮罩层即可触发隐藏事件
【对应措施-例子】
//html
// 下拉菜单
<div @click="isDisplay = !isDisplay">
<div>更多操作</div>
<div v-show="isDisplay" class="more_operation">列表内容...</div>
</div>
// 全屏透明蒙层
<div @click="isDisplay = false" v-show="isDisplay" class="mask"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//css
.more_operation {
postion: absolute;
z-index: 102;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}