标签: close-button

(Vue.js) 模态关闭事件

当我单击模式 \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 …
Run Code Online (Sandbox Code Playgroud)

modal-dialog button vue.js close-button

3
推荐指数
1
解决办法
2万
查看次数

标签 统计

button ×1

close-button ×1

modal-dialog ×1

vue.js ×1