单击图像会显示一个长的滚动模式。问题是，如果您在模式中滚动，也会滚动模式的背面。你如何解决它？
模态是一个组件。这是我的代码：
Carousel.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) { …当我单击模式 \xe2\x80\x8b\xe2\x80\x8b 的外部区域时，我想要与模式的关闭按钮相同的事件。（单击 \xe2\x80\x8b\xe2\x80\x8bmodal 外部区域时关闭模态的事件）
\n目前的进展是，当点击关闭模态按钮时，模态框被关闭。
\nCarousel.vue
\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 …