VUE点击遮罩层内功能区以外的地方，遮罩层关闭

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