javascript - 当按下模态外部时停止关闭模态

Question

我正在尝试制作一个弹出模式，我不想通过单击模式窗口外部来关闭模式。我已经搜索并尝试了不同的背景解决方案，但似乎没有任何效果。将不胜感激任何帮助!我的模式代码是:

<template>
  <div>
    <transition name="modal">
      <div v-if="isOpen">
        <div class="overlay" @click.self="isOpen = false;">
          <div class="modal">
            <h1>Modal heading</h1>
            <p>This my first modal using vue.js</p>
          </div>
        </div>
      </div>
    </transition>
    <button @click="isOpen = !isOpen;">
      {{ isOpen ? "Close" : "Open" }} modal
    </button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      isOpen: false
    };
  }
};
</script>

Answer 1

@click 事件被放置在覆盖层上，我认为它位于模式后面。单击覆盖层时，此部分会关闭模式。

@click.self="isOpen = false;"

只需删除上面的代码即可。您可以将其放置在另一个组件上；例如收盘十字、按钮或以您想要的任何方式触发收盘。