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;
   100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

  

原文地址:https://www.cnblogs.com/Blogzlj/p/15481272.html