当我点击模态的外部区域时,我想要与模态的关闭按钮相同的事件。(当点击模态外部区域时关闭模态的事件)
当前的进展是,当单击关闭模态按钮时,模态将关闭。
- Caribbean.vue**
<template>
<div>
<div v-for="(item, index) in photos" :key="index">
<div @click="imgClick(item)" style="cursor:pointer;">
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="item.show = false">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
</div>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
props: {
items: { type: Array, default: () => [] }
},
data() {
return {
photos: {}
}
},
created() {
this.photos = this.items.map(item => {
return { ...item, show: false }
})
},
methods: {
imgClick(item) {
item.show = true
}
},
components: {
Modal: Modal
}
}
</script>
字符串
Modal.vue
<template>
<transition name="modal">
<div class="modal-mask" @click="$emit('close')">
<div class="modal-wrapper">
<div class="app__phone">
<div class="feed">
<div class="post">
<div class="header headroom">
<div class="level-left">
<img src="../assets/imgs/user.gif" class="modal-header-img"/>
<div class="user">
<span class="username">username</span>
<button class="modal-default-button" @click="$emit('close')">Close</button>
</div>
</div>
</div>
<slot name="modal-img"></slot>
<div class="content">
<div class="content-title">
<slot name="modal-tit"></slot>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>
型
当我向底部<div>
添加一个click事件时,当我在模式外部单击时,它会关闭,但当我在模式中单击任何位置时,它都会关闭。
<div class="modal-mask" @click="$emit('close')">
型
这个链接在这个问题的公认答案中有一个Fiddle的例子。
https://stackoverflow.com/a/58023701/12066654
2条答案
按热度按时间vwoqyblh1#
你需要向外部模式div添加一个处理程序,如下所示:
字符串
dxxyhpgq2#
尝试创建一个不透明的div,它覆盖了整个屏幕,但z-index <你的modals z-index。然后@点击它,你发出你的事件来关闭modal:)
字符串