vue点击遮罩层阴影区域隐藏

 

<div class="overlay" v-if="mask" @click="closeMaskTap($event)">
        <div class="mask-content" ref="maskContent">
           content
        </div>
</div>

　　

export default {
  data() {
    return {
      mask: true
    };
  },
  methods: {
    closeMaskTap(event){
      if (!this.$refs.maskContent.contains(event.target)) {
        this.mask = false;
      }
    }
  }  
}

　　

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}