Skip to content

VUE点击遮罩层内功能区以外的地方,遮罩层关闭

html
<div v-show="visible" @touchmove.stop.prevent @mousewheel.prevent class="login-mark" @click="closeMark($event)">
    <div class="login-box" ref="loginBox">
      
    </div>
  </div>
js
data() {
    return {
      visible: false,
    }
  },
  methods: {
    closeMark(e) {
      if (!this.$refs.loginBox.contains(e.target)) {
        this.visible = false;
      }
    }
  }
scss
.login-mark {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.3);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 100px;
    height: 100px;
    background-color: #fff;
  }
}