vue.js - 如何通过单击 Vue.js 中的背景来关闭模态

Question

我已经使用 Vue.js 创建了一个简单的可重用模态组件并且它工作正常，但我想让当我点击背景时模态关闭，我该如何实现？我在stackoverflow上搜索并发现了一个类似的问题:
vuejs hide modal when click off of it
和接受的答案一样，把 @click="$emit('close')"在包装器上，但模态不会通过单击背景而关闭，就像在提供的示例中一样。这是我的代码:

<template>
 <div :class="backdrop" v-show="!showModal">
      <div class="modal-wrapper">
        <div class="modal-container" :class="size"  @click="$emit('close')">
          <span class="close-x" @click="closeModal">X</span>
          <h1 class="label">{{label}}</h1>
          <div class="modal-body">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'custom-modal',
  data() {
    return {
      showModal: false
    };
  },
  props: {
    label: String | Number,
    size: String,
    backdrop: String
  },
  components: {
    'custom-btn': customBtn
  },
  methods: {
    closeModal() {
      this.showModal = true;
    }
  }
};

</script>

<style>
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  margin: 0px auto;
  padding: 20px 30px;

  border-radius: 2px;
  background-color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;

}

.close-x {
  color: #00A6CE;
  float: right;
}

.close-x:hover {
  cursor: pointer;
}

</style>

Answer 1

这取决于您的需求，可能有点矫枉过正，但这是我使用过的东西 v-click-outside为了。

Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.

简单 npm install --save v-click-outside
然后(来自文档): <div v-click-outside="onClickOutside"></div>
和:

  onClickOutside (event, el) {
    this.closeModal();
  },

没有图书馆

我相信你需要这样设置:

<div class="modal-wrapper" @click="$emit('close')>
    <div class="modal-container" :class="size"  @click.stop=""></div>
</div>

看来您缺少 @click.stop=""这是必需的。此外，您想移动 $emit('close')高达 modal-wrapper等级。