vue 实现弹窗点击遮罩层隐藏弹窗

vue 实现弹窗点击遮罩层隐藏弹窗

1.template部分

<div class="discount_wrapper" v-if="isShowModal" @click="closeMsg($event)">//遮罩层
      <div class="main_discount" ref="msk">//弹窗
        <div class="main_text">
          这里是弹窗内容~~
        </div>
        <button class="confirm_btn">确定</button>
      </div>
 </div>

2.vue部分

data(){
	return{
		isShowModal:true
	}
}

methods:{
	closeMsg(ev){
      if(!this.$refs.msk.contains(ev.target)){
        this.isShowModal = false
      }

    }
}