Question

我已经使用Vue.js创建了一个简单的可重用模式组件，并且可以正常工作，但是我想这样做，以便当我单击背景关闭模式时，如何实现呢？我搜索并找到关于stackoverflow的类似问题： vuejs hide modal when click off of it 并执行与接受的答案相同的操作，将@click="$emit('close')"放在包装器上，但是通过单击背景（如提供的示例中所示）不会关闭模态。这是我的代码：

<template>
 <div :class="backdrop" v-show="!showModal">
      <div class="modal-wrapper">
        <div class="modal-container" :class="size"  @click="$emit('close')">
          <span class="close-x" @click="closeModal">X</span>
          <h1 class="label">{{label}}</h1>
          <div class="modal-body">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'custom-modal',
  data() {
    return {
      showModal: false
    };
  },
  props: {
    label: String | Number,
    size: String,
    backdrop: String
  },
  components: {
    'custom-btn': customBtn
  },
  methods: {
    closeModal() {
      this.showModal = true;
    }
  }
};

</script>

<style>
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  margin: 0px auto;
  padding: 20px 30px;

  border-radius: 2px;
  background-color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;

}

.close-x {
  color: #00A6CE;
  float: right;
}

.close-x:hover {
  cursor: pointer;
}

</style>

Answer 1

这取决于您的需求，可能会过高，但这是我使用v-click-outside的目的。

Vue指令对元素外部的单击做出反应，而不会停止事件传播。非常适合用于关闭对话，菜单等。

仅npm install --save v-click-outside

然后（来自文档）： <div v-click-outside="onClickOutside"></div>

和：

  onClickOutside (event, el) {
    this.closeModal();
  },

没有图书馆

我相信您需要这样设置：

<div class="modal-wrapper" @click="$emit('close')>
    <div class="modal-container" :class="size"  @click.stop=""></div>
</div>

似乎您缺少必需的@click.stop=""。另外，您想将$emit('close')移至modal-wrapper级别。

Answer 2

尝试创建一个透明的div，该div可以覆盖所有屏幕，但z-index <您的模式z-index。然后@单击它，您发出事件以关闭模式：)希望它会成功

Answer 3

    <template>
        <div @click="handleBackdropClick" class="backdrop" ref="backdrop">
            <div class="modal">
                <h1> Modal Title </h1>
                <input type="text" /> 
                <p> Modal Content </p>
            </div>
        </div>
    </template>
    <style>
    .modal {
        width: 400px;
        padding: 20px;
        margin: 100px auto;
        background: white;
        border-radius: 10px;
    }
    .backdrop{
        top: 0;
        position: fixed;
        background: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
    }
    .close{
        display: none;
    }
</style>
    export default {
        methods: {
            handleBackdropClick(e){
                console.log(e)
                if (e.path[0].className == "backdrop") {
                    this.$refs.backdrop.classList.add('close');
                }
                    
            }
        }
    }
    </script>

如何通过单击Vue.js中的背景来关闭模态

3 个答案: