模态框（Modal）-CSDN博客

本文链接：https://blog.csdn.net/xuukai/article/details/147971045

在 Vue 3 中，模态框（Modal）是一种常见的 UI 组件。

一、基本概念

模态框是一种遮罩层效果的对话框。它通常位于页面的顶层，会遮盖住页面的其他内容，使用户可以专注于模态框中的信息和操作。例如，当你在一个电商网站上点击查看商品详情时，可能会弹出一个模态框展示商品的详细图片、规格等信息。

二、在 Vue 3 中的作用和特点

作用
- 显示重要信息 ：用于向用户显示需要特别关注的信息，如错误提示、警告信息等。比如在用户输入错误的账号密码时，弹出一个模态框提示 “账号或密码错误”。
- 收集用户输入 ：可以收集用户的输入，如添加新联系人时，在模态框中包含表单让用户填写联系人姓名、电话等信息。
- 操作确认 ：在执行一些关键操作前，通过模态框让用户进行确认，如删除文件、提交订单等操作前的确认。
特点（基于 Vue 3 的响应式和组件化特点）
- 响应式显示和隐藏 ：通常使用一个响应式数据属性（如 isModalVisible）来控制模态框的显示和隐藏。在 Vue 3 中，你可以利用 ref 或 reactive 来定义这个属性。例如：
  - 定义：
    - 使用 ref：const isModalVisible = ref(false)
    - 当需要显示模态框时，将 isModalVisible.value 设置为 true，隐藏时设置为 false。
  - 在模板中，可以根据这个属性来控制模态框的 v - show（元素在切换时会保留页面布局位置）或者 v - if（元素会被从 DOM 中移除）显示状态。
- 组件化设计 ：可以将模态框设计为一个独立的组件，方便在项目中复用。组件中可以包含模态框的样式（如背景色、边框、阴影等）、内容区域（可以是文本、表单等）、操作按钮（如确定按钮、取消按钮）等。比如创建一个 Modal.vue 组件：
  - 模板部分：
    - 包含一个包含内容和按钮区域的容器元素。
    - 使用 v - if 或 v - show 来控制显示。
  - 脚本部分：
    - 定义响应式属性来控制显示状态，还可以定义事件（如点击确定按钮时触发的事件）。
    - 可以通过 props 接收父组件传递的配置参数，如模态框的标题、内容等。

三、简单示例代码

创建一个简单的模态框组件：
- 模板部分：

<template>
  <div class="modal - overlay" v - if="isVisible">
    <div class="modal - container">
      <div class="modal - content">
        <h3>{{ title }}</h3>
        <p>{{ content }}</p>
      </div>
      <div class="modal - buttons">
        <button @click="cancel">取消</button>
        <button @click="confirm">确定</button>
      </div>
    </div>
  </div>
</template>

* 脚本部分：

<script setup>
import { ref } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  }
});
const emits = defineEmits(['confirm', 'cancel']);
const isVisible = ref(false);
const confirm = () => {
  emits('confirm');
  isVisible.value = false;
};
const cancel = () => {
  emits('cancel');
  isVisible.value = false;
};
</script>

* 样式部分：

<style>
.modal - overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background - color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify - content: center;
  align - items: center;
}
.modal - container {
  background - color: white;
  padding: 20px;
  border - radius: 5px;
}
.modal - buttons {
  margin - top: 20px;
}
button {
  margin - right: 10px;
}
</style>

在父组件中使用这个模态框组件时，可以通过控制 isVisible 属性来显示和隐藏模态框，并且可以监听模态框组件发出的事件来执行相应操作。