How to implement pop-up layers and modal boxes in Vue?

Vue is a JavaScript-based front-end framework that provides many convenient tools and components for building single-page application (SPA) interfaces and user interactions. Among them, pop-up layer (modal) and modal box (popover) are common UI components, which can also be easily implemented in Vue. This article will introduce how to implement pop-up layers and modal boxes in Vue.

1. Pop-up layer

The pop-up layer is generally used to prompt messages, display menus or operation panels, and usually needs to cover the entire page or part of the area. Implementing pop-up layers in Vue requires the use of dynamic components and slots.

1. Create a pop-up layer component

First, we need to create a pop-up layer component. Here, we create a pop-up layer component named Modal and include a slot for dynamically loading the content that needs to be displayed.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}
</style>

In the above code, we first define a component named Modal and pass in a props named show, which is used to control whether the pop-up layer is displayed. In the component template, we use dynamic slots to display the content that needs to be displayed in the popup layer. We then set some styles to center the popup layer and added a semi-transparent background color.

2. Use the Modal component in the component that needs to display the pop-up layer

Next, we need to use the Modal component in the component that needs to display the pop-up layer. Here, we create a root component called App and add a button in the component to trigger the display of the popup layer.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示弹出层</button>
    <modal v-bind:show="showModal">
      <p>这是弹出层中的内容</p>
    </modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

In the above code, we first imported the previously defined Modal component and added a button to the component template to trigger the display of the popup layer. Then, we use the v-bind directive to bind the showModal attribute to the show attribute of the Modal component. Finally, we place the content that needs to be displayed in the popup layer in the slot of the Modal component.

2. Modal box

Modal box is usually used to prompt the user to confirm or select, while preventing the user from performing other operations before performing the operation. Similar to pop-up layers, dynamic components and slots are also required to implement modal boxes in Vue.

1. Create a modal box component

First, we need to create a modal box component. Here, we create a modal component named Confirmation and contain two slots, one for displaying prompt information and the other for displaying confirmation and cancel buttons.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirmation',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onCancel: Function,
    onConfirm: Function
  },
  methods: {
    cancel() {
      this.onCancel && this.onCancel()
    },
    confirm() {
      this.onConfirm && this.onConfirm()
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer button {
  margin-left: 10px;
}
</style>

In the above code, we created a modal box component named Confirmation and passed in the properties named show, onCancel and onConfirm, which are used to control whether the modal box is displayed or not, respectively. Cancel operations and confirm operations. In the component template, we use two slots, one for displaying prompt information and one for displaying confirm and cancel buttons. In the method, we define the cancel and confirm methods to handle cancellation and confirmation operations, and trigger the callback function passed by the parent component in these methods.

2. Use the Confirmation component in the component that needs to display the modal box

Next, we need to use the Confirmation component in the component that needs to display the modal box. Here, we create a root component named App and add a button in the component to trigger the Confirmation component to display the modal box.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示模态框</button>
    <confirmation
      v-bind:show="showModal"
      v-bind:onCancel="cancel"
      v-bind:onConfirm="confirm"
    >
      <template v-slot:body>
        <p>确定要删除吗？</p>
      </template>
    </confirmation>
  </div>
</template>

<script>
import Confirmation from './components/Confirmation.vue'

export default {
  name: 'App',
  components: {
    Confirmation
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    cancel() {
      this.showModal = false
    },
    confirm() {
      alert('删除成功！')
      this.showModal = false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

In the above code, we use the Confirmation component as a modal box component and bind the showModal attribute, cancel method and confirm method to the properties of the Confirmation component. In the slot of the Confirmation component, we display the prompt information to be displayed. In the Vue template, we use the v-slot directive to define the slot used in the Confirmation component, as well as the name of the slot (body). In the parent component, we define the cancel method and confirm method to handle cancellation and confirmation operations, and prompt the user that the deletion is successful during the confirmation operation.

Summary

Implementing pop-up layers and modal boxes in Vue requires the use of dynamic components and slots. By using components as pop-up layers or modal boxes, we can easily implement these common UI components. At the same time, by passing the callback function to the child component, we can easily handle user operations in the child component and feed the results back to the parent component.

The above is the detailed content of How to implement pop-up layers and modal boxes in Vue?. For more information, please follow other related articles on the PHP Chinese website!