Vue3 实现模态框组件

news/2024/10/30 9:24:50/

基于 Vue 3 实现模态框,并且单击遮罩层可关闭模态框

下面是一个基于 Vue 3 实现的模态框,并且点击遮罩层可关闭模态框的示例代码:

 

<template><div class="modal-wrapper" v-show="visible" @click.self="closeModal"><div class="modal"><div class="header"><h2>{{ title }}</h2><button @click="closeModal">X</button></div><div class="content"><slot></slot></div></div></div>
</template><script>import { ref } from "vue";export default {name: "Modal",props: {title: {type: String,required: true,},},setup(props, { emit }) {const visible = ref(false);const openModal = () => {visible.value = true;};const closeModal = () => {visible.value = false;emit("close");};return {visible,openModal,closeModal,};},};
</script><style scoped>.modal-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 9999;}.modal {background-color: white;padding: 20px;border-radius: 5px;}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.header h2 {margin: 0;}.header button {border: none;background-color: transparent;font-size: 20px;cursor: pointer;}.content {max-height: 400px;overflow: auto;}
</style>

在这个示例中,定义了一个名为 Modal 的组件,并且通过 props 属性接收了一个 title 属性,表示模态框的标题。在 setup 函数中,使用 ref 函数创建了一个名为 visible 的响应式数据,表示模态框是否可见。还定义了 openModalcloseModal 函数,分别用于打开和关闭模态框,并且通过 emit 函数触发了一个 close 事件,以便在模态框关闭时可以执行其他操作。

在模板中,使用 v-show 指令根据 visible 的值来控制模态框的显示和隐藏。还在外层包裹了一个 div 元素,并且使用了 @click.self 修饰符来监听单击遮罩层的事件,并且调用了 closeModal 函数来关闭模态框。在模态框内部,使用了插槽来动态渲染模态框的内容,并且在头部添加了一个关闭按钮,以便用户手动关闭模态框。

最后,在样式中定义了模态框的样式,包括遮罩层、模态框头部、模态框内容等。通过这个示例,可以实现一个简单的模态框,并且单击遮罩层可关闭模态框。

基于原生 JavaScript、HTML、CSS 实现模态框,并且单击遮罩层可关闭模态框

下面是一个基于原生 JavaScript、HTML、CSS 实现的模态框,并且单击遮罩层可关闭模态框的示例代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Modal Dialog</title><style>.modal-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 9999;}.modal {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;padding: 20px;border-radius: 5px;z-index: 10000;}.modal-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.modal-header h2 {margin: 0;}.modal-close {border: none;background-color: transparent;font-size: 20px;cursor: pointer;}</style></head><body><button id="openModalBtn">Open Modal</button><div class="modal-overlay" id="modalOverlay"><div class="modal" id="modal"><div class="modal-header"><h2>Modal Header</h2><button class="modal-close" id="modalCloseBtn">X</button></div><div class="modal-body"><p>Modal content goes here.</p></div></div></div><script>const openModalBtn = document.getElementById("openModalBtn");const modalOverlay = document.getElementById("modalOverlay");const modal = document.getElementById("modal");const modalCloseBtn = document.getElementById("modalCloseBtn");openModalBtn.addEventListener("click", () => {modalOverlay.style.display = "block";modal.style.display = "block";});modalCloseBtn.addEventListener("click", () => {modalOverlay.style.display = "none";modal.style.display = "none";});modalOverlay.addEventListener("click", (event) => {if (event.target === modalOverlay) {modalOverlay.style.display = "none";modal.style.display = "none";}});</script></body>
</html>

在这个示例中,通过 HTML 定义了一个按钮和一个模态框,模态框包括一个遮罩层和一个内部内容区域。在 CSS 中,定义了遮罩层和模态框的样式,并且使用了 display: none 将它们初始隐藏。

在 JavaScript 中,首先获取了需要操作的 DOM 元素。在打开模态框时,将遮罩层和模态框的 display 属性设置为 block,以显示它们。在关闭模态框时,将它们的 display 属性设置为 none,以隐藏它们。在处理遮罩层单击事件时,判断当前点击的元素是否为遮罩层本身,如果是,则关闭模态框。

通过这个示例,可以实现一个简单的模态框,并且单击遮罩层可关闭模态框。


http://www.ppmy.cn/news/70250.html

相关文章

Mysql中select语句的执行流程?

Mysql中select语句的执行流程&#xff1f; 答&#xff1a; SELECT 语句的执行过程为&#xff1a;连接、查询缓存、a词法分析&#xff0c;语法分析&#xff0c;语义分析&#xff0c;构造执行树&#xff0c;生成执行计划、执行器执行计划&#xff0c;下面开始梳理一次完整的查询…

对SRC并发漏洞挖掘的思考

对SRC并发漏洞挖掘的思考 1.burpsuite Turbo插件使用2.并发点赞测试3.并发验证码测试4.某代金券逻辑测试5.有限制的并发验证码绕过6.对于并发漏洞的思考 1.burpsuite Turbo插件使用 Turbo Intruder是一个用于发送大量HTTP请求并会分析其结果的Burp Suite扩展。它旨在补充Burp …

JWT 入门

1.介绍 JSON Web Token&#xff08;JWT&#xff09;是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点的单点登录&#xff08;SSO…

网络编程 lesson4 linux下的IO模型和特点

目录 阻塞式IO 工作流程 非阻塞式IO 工作流程 设置非阻塞IO方法 fcntl实例 信号驱动IO 工作流程 实例&#xff1a;在LINUX下检听自己鼠标的动作 IO多路复用&#xff08;重点&#xff0c;难点&#xff09; 工作流程 本文核心内容&#xff01;&#xff01;&#xff01…

自动化测试 —— Airtest

最近在做APP自动化过程中&#xff0c;有调研Airtest框架的使用&#xff0c;便初步介绍一下Airtest框架的使用&#xff0c;有兴趣的小伙伴&#xff0c;可以一起探讨学习~ (一&#xff09;背景 Airtest是什么&#xff1f; Airtest是一款基于Python的、跨平台的UI自动化测试框架&…

基于html+css图展示58

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

Agisoft Metashape 红外影像处理

系列文章目录 文章目录 系列文章目录前言一、加载红外影像二、对齐照片三、构建 DEM四、生成 DOM五、温度值可视化前言 Agisoft Metashape 专业版支持处理来自 AscTec(ARA 格式)、WIRIS(TIFF 格式)热成像仪和以 R-JPEG(FLIR 数据)格式保存数据的热成像数据。 在本文中,…

如何选择合适的自动化测试工具? 我教你

目录 前言 选择最佳自动化测试工具的重要性 自动化测试工具的种类 选择自动化测试工具时要考虑的因素 自动化测试工具的选择标准 前言 自动化测试是高质量软件交付领域中最重要的实践之一。在今天的敏捷开发方法中&#xff0c;几乎任一软件开发过程都需要在开发阶段的某个…