转载说明：原创不易，未经授权，谢绝任何形式的转载

开篇

模态框（弹出层对话框）在大多数现代应用程序中非常常见。它们主要用于呈现简洁的信息，非常适合显示广告和促销内容。模态框提供了一种快速传达信息的方式，并提供了用户友好的关闭选项。

在本文中，我们将使用Vuejs构建一个弹出模态框。该模态框将包括一个取消或关闭按钮，以方便用户在完成任务后关闭它。此外，我们还将实现一个功能，允许用户在模态框区域外点击以关闭它。

模态弹出组件

<script setup lang="ts">import { ref } from 'vue';const message = ref('This is a modal popup');const emit = defineEmits(['close']);const closeModal = () => {  emit('close');};</script><template>  <div class="popup" @click.self="closeModal">    <div class="popup-content">      <div class="popup-header">        <h2 class="popup-title">{{ message }}</h2>        <button class="popup-close-button" @click.prevent="closeModal">X</button>      </div>      <article>        <div class="popup-content-text">          This is a simple modal popup in Vue.js        </div>      </article>    </div>  </div></template>

Script Section

<script setup lang="ts">import { ref } from 'vue';const message = ref('This is a modal popup');const emit = defineEmits(['close']);const closeModal = () => { emit('close');};</script>

在这个部分，我们从Vue中导入所需的功能。

• ref 用于创建一个包含在模态框中显示的响应式变量消息。
• emit用于定义一个名为“close”的事件，该事件可被触发以关闭模态框。
• closeModal是一个函数，当调用时会触发“close”事件，从而有效地关闭模态框。

Template Section

<template>   <div class="popup" @click.self="closeModal">   <div class="popup-content">   <div class="popup-header">   <h2 class="popup-title">{{ message }}</h2>   <button class="popup-close-button" @click.prevent="closeModal">X</button> </div> <article>   <div class="popup-content-text">   This is a simple modal popup in Vue.js   </div> </article> </div> </div></template>

本段代码义了模板中模态框的结构。

• 具有“popup”类的最外层div用作模态框的背景。
• @click.self="closeModal"事件监听器附加到背景上，允许在其内容之外点击时关闭模态框。
• 内容包括一个标题（popup-title）和一个关闭按钮（popup-close-button）。
• 在标题下方，有一个文章部分，其中包含了模态框的主要内容。

渲染模态框组件

<script setup lang="ts">import { ref } from 'vue'import Popup from "@/components/Popup.vue"; // @ is an alias to /srcconst msg = ref('Hello World!')const isOpened = ref(false)</script><template>  <div>    <h1>{{ msg }}</h1>    <button @click="isOpened = !isOpened">Open Popup</button>    <Teleport to="body">      <Popup v-if="isOpened" @close="isOpened = !isOpened" />    </Teleport>  </div></template>

数据和状态管理：

代码使用Vue的ref函数创建了两个响应式变量：

• - msg: 初始设置为“Hello World!”的文本消息被存储。
• - isOpened: 这是一个布尔变量，初始值为false，表示弹出窗口是否打开或关闭。

按钮点击事件

模板中有一个带有点击事件监听器（@click）的<button>元素。当按钮被点击时，它会切换isOpened变量的值，从而有效地打开或关闭弹出窗口。

导入弹出框组件

• 代码导入了一个弹出组件（Popup.vue）。
• 在模板中，使用v-if条件渲染弹出窗口组件。只有当isOpened变量为true时（v-if="isOpened"），弹出窗口才会显示，表示弹出窗口应该是打开的。
• <Teleport>用于将弹出窗口组件移动到HTML文档的元素中。这样可以确保弹出窗口在当前组件的DOM层次结构之外渲染，并且可以显示在页面上的其他内容之上。

组件之间的通信：

• 当需要关闭弹出组件时，Popup组件会触发一个关闭事件@close。父组件使用@close事件监听器来监听此关闭事件。
• 当Popup组件发出事件时，它切换isOpened变量，从而关闭弹出窗口。

您可以在CodeSandbox上使用本文中设计的代码进行操作。

https://codesandbox.io/s/suspicious-kepler-993dmh?file=%2Fsrc%2Fviews%2FHome.vue%3A0-420

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。