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