(Vue.js)模式关闭事件

rm5edbpk  于 2023-11-21  发布在  Vue.js
关注(0)|答案(2)|浏览(149)

当我点击模态的外部区域时,我想要与模态的关闭按钮相同的事件。(当点击模态外部区域时关闭模态的事件)
当前的进展是,当单击关闭模态按钮时,模态将关闭。

  • 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

vwoqyblh

vwoqyblh1#

你需要向外部模式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>

字符串

dxxyhpgq

dxxyhpgq2#

尝试创建一个不透明的div,它覆盖了整个屏幕,但z-index <你的modals z-index。然后@点击它,你发出你的事件来关闭modal:)

<template>
        <div v-show="showModal" :class="{ 'modal fade show' : showModal}" tabindex="-1" ref="backdrop">
            <div class="modal">
                <h1> Modal Title </h1>
                <input type="text" /> 
                <p> Modal Content </p>
            </div>
            <div class="backdrop" @click="showModal = false"></div>
        </div>
    </template>
    <style>
    .modal.backdrop {
       position: fixed;
       width: 100%;
       height: 100%;
       z-index: 1;
       background-color: rgba(0, 0, 0, 0.5);
    }
    .modal-dialog {
       margin: 0px auto;
       padding: 25px 20px;
       background-color: #fff;
       transition: all 0.3s ease;
       border-radius: 15px;
       width: 375px;
       z-index: 2;
    }
    </style>
    export default {
        data: function () {
            return {
              showModal: false
            }
        }
        methods: {
            closeModal: function() {
                this.showModal = true;
            }
        }
    }
    </script>

字符串

相关问题