Vue3实现轻量级全局可替换内容模态框

2023-10-01 05:50:07

Vue3全局可替换内容模态框

概述

模态框是一种常用的组件，常用于需要显示较少但重要内容时，需要立即捕获用户焦点。Vue3提供了许多创建模态框的方法，本文将介绍一种使用Vue3创建轻量级全局可替换内容模态框的方法。该模态框可以轻松地替换页面上的任何内容，并提供了一个居中的对话框和一个处在背后的黑色半透明遮罩。

实现

创建模态框组件

<template>
  <div class="modal-container" :class="{ 'is-active': isActive }">
    <div class="modal-overlay"></div>
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    open() {
      this.isActive = true;
    },
    close() {
      this.isActive = false;
    }
  }
};
</script>

<style>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.modal-container.is-active {
  opacity: 1;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  width: 500px;
  max-width: 90%;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
</style>

注册全局组件

import Modal from './Modal.vue';

Vue.component('modal', Modal);

使用模态框组件

<template>
  <div>
    <button @click="openModal">Open Modal</button>

    <modal>
      <h1>Modal Title</h1>
      <p>Modal content</p>
    </modal>
  </div>
</template>

<script>
export default {
  methods: {
    openModal() {
      this.$refs.modal.open();
    }
  }
};
</script>