开篇
模态框(弹出层对话框,Modal Popup)在大多数现代应用程序中非常常见。它们主要用于呈现简洁的信息,非常适合显示广告和促销内容。模态框提供了一种快速传达信息的方式,并提供了用户友好的关闭选项。
在本文中,我们将使用Vuejs构建一个弹出模态框。该模态框将包括一个取消或关闭按钮,以方便用户在完成任务后关闭它。此外,我们还将实现一个功能,允许用户在模态框区域外点击以关闭它。
模态弹出组件
代码语言:javascript复制<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
代码语言:javascript复制<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
代码语言:javascript复制<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)。
- 在标题下方,有一个文章部分,其中包含了模态框的主要内容。
渲染模态框组件
代码语言:javascript复制<script setup lang="ts">
import { ref } from 'vue'
import Popup from "@/components/Popup.vue"; // @ is an alias to /src
const 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文档的<body>元素中。这样可以确保弹出窗口在当前组件的DOM层次结构之外渲染,并且可以显示在页面上的其他内容之上。
组件之间的通信:
- 当需要关闭弹出组件时,Popup组件会触发一个关闭事件@close。父组件使用@close事件监听器来监听此关闭事件。
- 当Popup组件发出事件时,它切换isOpened变量,从而关闭弹出窗口。
您可以在CodeSandbox上使用本文中设计的代码进行在线体验。
https://codesandbox.io/s/suspicious-kepler-993dmh?file=/src/views/Home.vue:0-420