时间戳

首页 > 解决方案 > 防止子元素接收点击事件不起作用

vue.js - 防止子元素接收点击事件不起作用

问题描述

我正在尝试制作一个模态组件并在我单击组件外部时将其关闭。这是我当前的设置：

  1. 在元素上设置了单击事件的Authdiv组件：
    <template>   <div>
        <transition name="modal">
          <div class="modal-mask" @click="$parent.$emit('close')">
            <div class="modal-wrapper">
              <div class="modal-container">
                <div class="modal-header">
                  <slot name="header">Default Header</slot>
                </div>
                <div class="model-body">
                  <slot name="body">Default Body</slot>
                </div>
                <div class="modal-footer">
                  <slot name="footer">Default Footer</slot>
                </div>
              </div>
            </div>
          </div>
        </transition>   </div> </template>
  1. 注入必要信息的SignIn组件：
<template>
  <div>
    <Auth />
  </div>
</template>
  1. 使用 SignIn 组件的Home组件：
<template>
  <div class="home">
    <SignIn v-if="showModal" @close="showModal = false" />
  </div>
</template>

现在，当我在模式外部单击时，它的行为正常，close事件被调用。
但是当我在模态框内单击时也会调用它。

不是我尝试使用@click.self，但现在即使在模态之外单击它也不再起作用。

      <div class="modal-mask" @click.self="$parent.$emit('close')">

我目前正在学习VueJs，但我不明白它是如何工作的。我认为self会阻止将点击事件传播到子元素，仅此而已。

任何人都知道发生了什么？

PS：我正在使用此设置，因为我想使用 Auth 组件进行登录和注册。

标签： vue.js

解决方案

要么<div class="modal-wrapper">要么<div class="modal-container">需要@click.prevent.stop

<template>

   <div>

        <transition name="modal">

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

            <div class="modal-wrapper">

              <div class="modal-container" @click.prevent.stop>

                <div class="modal-header">
                  <slot name="header">Default Header</slot>
                </div>

                <div class="model-body">
                  <slot name="body">Default Body</slot>
                </div>

                <div class="modal-footer">
                  <slot name="footer">Default Footer</slot>
                </div>

              </div>

            </div>

          </div>

        </transition>

    </div>

</template>

推荐阅读