VUE点击遮罩层内功能区以外的地方,遮罩层关闭
1.template代码
<button @click="writeMessageShow=true">打开遮罩</button>
<section class="wmassageMask" v-show="writeMessageShow" @click="writeMessageFun($event)">
<div class="messageMaskContent" ref="msk">
<p class="wenziP">文字留言</p>
<p class="yuyinP">语音留言</p>
</div>
</section>
2.script代码
data () {
return {
writeMessageShow: false
}
},
methods: {
writeMessageFun (ev) {
if (!this.$refs.msk.contains(ev.target)) {
this.writeMessageShow = false;
}
}
}
3.style代码
.wmassageMask{
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,.3);
z-index: 101;
.messageMaskContent{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
}
p{
text-align: center;
font-size: .768rem;
line-height: 1;
margin: 1.365333rem auto;
font-weight: 500;
}
}