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