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;
  }
}
/src/vue/VUE%E7%82%B9%E5%87%BB%E9%81%AE%E7%BD%A9%E5%B1%82%E5%86%85%E5%8A%9F%E8%83%BD%E5%8C%BA%E4%BB%A5%E5%A4%96%E7%9A%84%E5%9C%B0%E6%96%B9%EF%BC%8C%E9%81%AE%E7%BD%A9%E5%B1%82%E5%85%B3%E9%97%AD.html