Vue realizes the effect of pop-up box clicking on blank page pop-up box to disappear

VUE implements pop-up box Click the blank page pop-up box to disappear

You can implement pop-up boxes in Vue and then click on a blank page to hide the pop-up window. The specific implementation is as follows:

Create pop-up component

Create a pop-up box component in Vue to render the content and style of the pop-up box. This component should accept two props, one is show, indicating whether the pop-up box is displayed, and the other is onClose, indicating the closing function of the pop-up box.

<template>
  <div v-if="show" class="modal">
    <div class="modal-body">
      <slot></slot>
      <button @click="onClose">closure</button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['show', 'onClose']
}
</script>

Create parent component

Use the above pop-up box component in the parent component, and bind the click event to the document in the blank area, and close the pop-up box when clicking on the non-pop-up box area.

<template>
  <div class="page">
    <button @click="showModal = true">Popup box</button>
    <modal :show="showModal" :onClose="closeModal">
      <p>这是Popup box的内容</p>
    </modal>
  </div>
</template>
<script>
import Modal from './'
export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  },
  created() {
    ('click', );
  },
  beforeDestroy() {
    ('click', );
  },
  methods: {
    onClickOutside(event) {
      if ( && !this.$()) {
        ();
      }
    },
    closeModal() {
       = false
    }
  }
}
</script>

In the parent component, we use the v-if directive to determine whether the pop-up box is displayed. At the same time, we bind a click event to the document in the created hook function to listen to the click event of the page. In the onClickOutside method, if the current pop-up box is displayed and the clicked element is not an element in the pop-up box, the pop-up box is closed. In the closeModal method, we set showModal to false to hide the pop-up component.

Add style

Finally, we add some simple styles for the pop-up box and parent components.

<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>

The above is the entire code implementation of Vue's pop-up box that clicks on the blank page to disappear.

This article about VUE implementation pop-up box. Clicking on the blank page pop-up box to disappear is the end. For more related contents of vue pop-up box, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!