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