vue點擊遮罩層陰影區域隱藏

原文鏈接：https://www.cnblogs.com/fairy62/p/10179599.html

原文鏈接 https://www.cnblogs.com/fairy62/p/10179599.html

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>

script

data () {
　　return {
　　　　writeMessageShow: false
　　}
},
methods: {
　　writeMessageFun (ev) {
　　　　if (!this.$refs.msk.contains(ev.target)) {
　　　　　　this.writeMessageShow = false;
　　　　}
　　}
}