<template>
  <div v-if="show" class="modal">
    <div class="modal-body">
      <slot></slot>
      <button @click="onClose">關(guān)閉</button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['show', 'onClose']
}
</script>

<template>
  <div class="page">
    <button @click="showModal = true">彈出框</button>
    <modal :show="showModal" :onClose="closeModal">
      <p>這是彈出框的內(nèi)容</p>
    </modal>
  </div>
</template>
<script>
import Modal from './Modal.vue'
export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  },
  created() {
    document.addEventListener('click', this.onClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClickOutside);
  },
  methods: {
    onClickOutside(event) {
      if (this.showModal && !this.$el.contains(event.target)) {
        this.closeModal();
      }
    },
    closeModal() {
      this.showModal = false
    }
  }
}
</script>

<style>
.page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}
</style>