如何通过单击 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

如果没有库，您需要像这样设置它：

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

看来您缺少@click.stop=""所需的内容。此外，您还想将其$emit('close')提升到该modal-wrapper级别。

对于库来说，这可能有点过分了，但这是我使用v-click-outside的目的。

Vue 指令对元素外部的点击做出反应，而不停止事件传播。非常适合结束对话、菜单等。

简单地npm install --save v-click-outside

然后（来自文档）： <div v-click-outside="onClickOutside"></div>

和：

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