(Vue.js) 模态关闭事件

Question

当我单击模式 \xe2\x80\x8b\xe2\x80\x8b 的外部区域时，我想要与模式的关闭按钮相同的事件。（单击 \xe2\x80\x8b\xe2\x80\x8bmodal 外部区域时关闭模态的事件）

\n

目前的进展是，当点击关闭模态按钮时，模态框被关闭。

\n

Carousel.vue

\n

\r\n

\r\n

<template>\n  <div>\n    <div v-for="(item, index) in photos" :key="index">\n      <div @click="imgClick(item)" style="cursor:pointer;">\n        <img :src="item.thumbnail" />\n      </div>\n      <Modal v-if=\'item.show\' @close="item.show = false">\n        <div slot=\'body\'>\n          <img :src="item.thumbnail" :class="`img-index--${index}`"/>\n        </div>        \n      </Modal>\n    </div>\n  </div>\n</template>\n<script>\nimport Modal from \'./Modal.vue\'\nexport default {\n  props: {\n    items: { type: Array, default: () => [] }\n  },\n  data() {\n    return {\n      photos: {}\n    }\n  },\n  created() {\n    this.photos = this.items.map(item => {\n      return { ...item, show: false }\n    })\n  },\n  methods: {\n    imgClick(item) {\n      item.show = true\n    }\n  },\n  components: {\n    Modal: Modal\n  }\n}\n</script>

\r\n

\r\n

\r\n

\n

Modal.vue

\n

\r\n

\r\n

<template>\n  <transition name="modal">\n    <div class="modal-mask" @click="$emit(\'close\')">\n      <div class="modal-wrapper">\n        <div class="app__phone">\n          <div class="feed">\n            <div class="post">\n              <div class="header headroom">\n                <div class="level-left">\n                  <img src="../assets/imgs/user.gif" class="modal-header-img"/>\n                  <div class="user">\n                    <span class="username">username</span>\n                    <button class="modal-default-button" @click="$emit(\'close\')">Close</button>\n                  </div>\n                </div>\n              </div>\n              <slot name="modal-img"></slot>\n              <div class="content">\n                <div class="content-title">\n                  <slot name="modal-tit"></slot>\n                </div>\n              </div>\n            </div>\n          </div> \n        </div>\n      </div>\n    </div>\n  </transition>\n</template>

\r\n

\r\n

\r\n

\n

当我向底部添加单击事件时<div>，当我在模式外部单击时它会关闭，但当我单击模式中的任何位置时它会关闭。

\n

<div class="modal-mask" @click="$emit(\'close\')">\n

\n

这个链接在问题的接受答案中有一个小提琴示例。

\n

/sf/answers/4061659101/

\n

Answer 1

您需要向外部模态 div 添加一个处理程序，如下所示：

<template id="modal">
  <div class="modal" @click.self="close">
    <div class="close" @click="close">&times;</div>
    <div class="body">
      <slot name="body" />
    </div>
  </div>
</template>