Question

当您在对话框外部单击时，我正在尝试运行一些代码以关闭模式。问题是我有一个遮罩，使我用来定位关闭功能的对话框后面的页面变暗。它具有嵌套在其中的对话框，因此当您单击对话框本身时，它将关闭。我如何正常单击对话框，同时仍使父元素在单击时关闭模态？

以下是我目前正在做的事情的大致构想：

<div class="modal-background" @click="dialogOpen=false" v-if="dialogOpen">
  <div class="dialog-box">
    dialog content
  </div>
</div>

Answer 1

您可以使用Event.target确定单击哪个元素。

new Vue({
  el: '#app',

  data() {
    return {
      dialogOpen: true
    }
  },

  methods: {
    closeDialog(e) {
      if (e.target.classList.contains('modal-background')) {
        this.dialogOpen = false;
      } 
      else {
        // Dialog box was clicked
      }
    }
  }
})

.modal-background {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
}

.dialog-box {
  width: 400px;
  height: 70px;
  margin: 2em auto;
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="modal-background" @click="closeDialog" v-if="dialogOpen">
    <div class="dialog-box">
      dialog content
    </div>
  </div>
</div>

单击父元素而不是子元素时运行函数？

1 个答案: