当前位置: 首页 > news >正文

78.Vue 3 重用性模态框组件

模态框是大多数 Web 应用程序中的基本构建块。虽然最初实现起来可能看起来有点棘手,但实际上,使用 Vue 和一些 Flexbox 技巧,这不仅可行,而且非常简单。

让我们一起实现一个基础的模态框组件。

架构如下:

8350a41ad3190f1d2627ffafc41a2019.jpeg


  • AppModal.vue:基础组件,负责减少代码重复并保持整个应用程序的一致外观和感觉

  • *UseCase*Modal.vue:每个用例都有一个专门的组件,负责指定模态框的内容和处理任何操作。

每个页面可以导入这些组件之一,并应处理其可见性。

基础模态框组件

要创建一个模态框,我们需要两个 div 和一些 CSS。

<div class="modal"><div class="modal-content">Content</div>
</div>
.modal {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 2;background-color: $color-backdrop;display: flex;align-items: center;justify-content: center;
}
.modal-content {flex-basis: 600px;padding: spacing(4);background-color: $color-white;border-radius: $border-radius;
}

外部元素具有固定位置,填充整个屏幕以创建背景效果。它还设置为 flex 并将内容对齐在中间。内部元素设置了最大宽度并根据我们的样式指南进行了一些样式设置。在这里执行样式设置而不是在每个用例模态框中进行设置,以减少代码重复并保持整个应用程序的相同 UI。

相关文章:

78.Vue 3 重用性模态框组件

模态框是大多数 Web 应用程序中的基本构建块。虽然最初实现起来可能看起来有点棘手&#xff0c;但实际上&#xff0c;使用 Vue 和一些 Flexbox 技巧&#xff0c;这不仅可行&#xff0c;而且非常简单。 让我们一起实现一个基础的模态框组件。 架构如下&#xff1a; AppModal.vue…...

《昇思25天学习打卡营第9天|onereal》

继续学习昨天的 基于MindNLPMusicGen生成自己的个性化音乐 生成音乐 MusicGen支持两种生成模式&#xff1a;贪心&#xff08;greedy&#xff09;和采样&#xff08;sampling&#xff09;。在实际执行过程中&#xff0c;采样模式得到的结果要显著优于贪心模式。因此我们默认启…...

Wireshark - tshark支持iptables提供数据包

tshark现在的数据包获取方式有两种&#xff0c;分别是读文件、网口监听&#xff08;af-packet原始套接字&#xff09;。两种方式在包获取上&#xff0c;都是通过读文件的形式&#xff1b;存在文件io操作&#xff0c;在专门处理大流量的情境下&#xff0c; 我们复用wireshark去做…...

快团团团长如何批量退款可自定义退款金额(批量退差价)?

快团团团长如何批量退款可自定义退款金额&#xff08;批量退差价&#xff09;&#xff1f; 在售后处理中&#xff0c;经常会出现需要给某一商品退差价的场景&#xff0c;因此在批量退款时需要自定义退款金额。现快团团已支持批量退自定义金额&#xff0c;操作方法和注意事项如…...

MySQL——事务ACID原则、脏读、不可重复读、幻读

什么是事务 要么都成功&#xff0c;要么都失败 一一一一一一一 1. SQL执行&#xff1a;A给B转账 A 1000 ---->200 B 200 2. SQL执行&#xff1a;B收到A的钱 A 800 B 400 一一一一一一一 将一组SQL放在一个批次中去执行~ 事务原则&#xff1a;ACI…...

洗衣机水龙头要买有止逆阀的,多花几十元能省掉几万,值了

问大家一下&#xff0c;你家洗衣机水龙头用的是什么样的&#xff1f;      可能有业主会说我家买的是纯铜的&#xff0c;质量挺好的。      如果你家选的洗衣机水龙头仅仅是纯铜的&#xff0c;并没有其他的功能&#xff0c;你还是选做错了。      因为洗衣机水龙头…...

Android 蓝牙开发全面指南

Android 平台的蓝牙功能提供了丰富的API和工具&#xff0c;使开发者能够轻松实现从基本连接到复杂数据交换的各种蓝牙功能。蓝牙技术已经成为智能手机和其他设备间通信的重要方式&#xff0c;尤其在物联网和智能家居应用中有广泛应用。 关键词总结 Android 蓝牙开发涉及多个关…...

Hadoop3:Yarn框架的三种调度算法

一、概述 目前&#xff0c;Hadoop作业调度器主要有三种&#xff1a;FIFO、容量&#xff08;Capacity Scheduler&#xff09;和公平&#xff08;Fair Scheduler&#xff09;。Apache Hadoop3.1.3默认的资源调度器是Capacity Scheduler。 CDH框架默认调度器是Fair Scheduler。 …...

JDBC链接kerberos认证的impala数据库报错问题解决

先上代码 public static Connection connectToImpala() {try {log.info("ketTabPath:" ketTabPath);log.info("krb5Path:" krb5Path);System.setProperty("java.security.krb5.conf", krb5Path);System.setProperty("sun.security.krb5.…...

firewalld(2)安装、配置文件、规则查询

安装firewalld 我使用的操作系统是debian 12,并没有安装firewalld。 通过apt install firewalld安装firewalld firewalld 本身是一个服务&#xff08;firewalld.service&#xff09;&#xff0c;可以通过 systemctl 进行启动、停止和重启&#xff0c;而iptables 本身并不是一个…...

施耐德全新EtherCAT运动控制器M310介绍

在制造业的蓬勃发展下&#xff0c;高性能运动控制器成为提升生产效率、保障产品质量的关键设备之一。M310是施耐德电气新一代高性能运动控制器&#xff0c;它基于Intel X86硬件平台和Codesys V3.5 SP19软件平台开发&#xff0c;支持EtherCAT总线&#xff0c;拥有强大算力、高易…...

Springboot Mybatis 多数据源配置以及使用

在Spring Boot中配置MyBatis的多数据源是一个常见需求&#xff0c;尤其是在需要连接多个数据库时&#xff0c;下面是详细的步骤指南。 引入依赖 首先&#xff0c;在你的pom.xml文件中添加Spring Boot、MyBatis和数据库连接的相关依赖。例如&#xff0c;如果你使用的是MySQL数…...

Android启动时间分析

在Android启动过程中,“NHLOS” 和 “LK” 是两个与启动时间相关的术语,它们分别指的是: 各阶段时间 I Minidump: Enabled with max number of regions 200 I KPI : Bootloader start count = 59264 I KPI : Bootloader end count = 101746 I KPI : Boo…...

智能洗车管理系统设计

智能洗车管理系统设计的核心在于整合先进的信息技术与自动化设备&#xff0c;以提升洗车服务的效率、降低成本并增强客户体验。以下是一个概括性的设计框架&#xff1a; 1. 系统需求分析 用户需求&#xff1a;了解车主对于快速、便捷、高质量洗车服务的需求。业务需求&#xf…...

vue3弹窗usehook

说明 个人记录保存。 import {ref} from "vue";export default function useDialog(opts) {const visible ref(false)const loading ref(false)const open (v) > {visible.value truetypeof opts.onOpen "function" && opts.onOpen(v)}c…...

上帝之眼(BEVSee):多相机间无需标定,将各自目标统一到同一坐标系下(代码开源,提供数据集)

Abstract 我们解决了一个新的问题&#xff0c;即在鸟瞰视角&#xff08;BEV&#xff09;中无需预先给定相机校准的多视角相机和目标注册问题。这将多视角目标注册问题提升到一个新的无需校准的阶段&#xff0c;从而极大地缓解了许多实际应用中的限制。然而&#xff0c;这是一个…...

imagesc函数 纵坐标翻转 colormap “set” “jet“

纵坐标默认上小下大 翻转&#xff1a; 在Matlab中&#xff0c;使用imagesc函数绘制的图像的纵坐标默认是从上到下递增的&#xff0c;即下面的值较大&#xff0c;上面的值较小。如果想要翻转纵坐标&#xff0c;使之从上到下递增&#xff0c;可以通过设置坐标轴的YDir属性为’n…...

Postman接口测试工具的原理及应用详解(二)

本系列文章简介: 在当今软件开发的世界中,接口测试作为保证软件质量的重要一环,其重要性不言而喻。随着前后端分离开发模式的普及,接口测试已成为连接前后端开发的桥梁,确保前后端之间的数据交互准确无误。在这样的背景下,Postman作为一款功能强大、易于使用的接口测试工…...

IPython脚本加载秘籍:探索脚本魔法的艺术

IPython脚本加载秘籍&#xff1a;探索脚本魔法的艺术 IPython&#xff0c;这个强大的交互式Python解释器&#xff0c;不仅提供了丰富的交互式编程功能&#xff0c;还允许用户加载和运行Python脚本。这一功能极大地扩展了IPython的实用性&#xff0c;使得用户可以在IPython环境…...

使用shell脚本进行clang-tidy静态代码分析

文章目录 0. 引言1. 完整检测脚本代码 clang-tidy-check.sh1.1 流程图1.2 脚本功能概述 2. 该脚本优缺点 0. 引言 clang-tidy 是基于 Clang 的工具&#xff0c;提供了丰富的代码检查功能&#xff0c;可以根据用户配置文件进行定制化的检查和规则定义。 之前的文章《使用 Clang…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...

使用 uv 工具快速部署并管理 vLLM 推理环境

uv&#xff1a;现代 Python 项目管理的高效助手 uv&#xff1a;Rust 驱动的 Python 包管理新时代 在部署大语言模型&#xff08;LLM&#xff09;推理服务时&#xff0c;vLLM 是一个备受关注的方案&#xff0c;具备高吞吐、低延迟和对 OpenAI API 的良好兼容性。为了提高部署效…...

无头浏览器技术:Python爬虫如何精准模拟搜索点击

1. 无头浏览器技术概述 1.1 什么是无头浏览器&#xff1f; 无头浏览器是一种没有图形用户界面&#xff08;GUI&#xff09;的浏览器&#xff0c;它通过程序控制浏览器内核&#xff08;如Chromium、Firefox&#xff09;执行页面加载、JavaScript渲染、表单提交等操作。由于不渲…...

Flask和Django,你怎么选?

Flask 和 Django 是 Python 两大最流行的 Web 框架&#xff0c;但它们的设计哲学、目标和适用场景有显著区别。以下是详细的对比&#xff1a; 核心区别&#xff1a;哲学与定位 Django: 定位: "全栈式" Web 框架。奉行"开箱即用"的理念。 哲学: "包含…...

AIGC 基础篇 Python基础 02

1.bool类型 书接上回&#xff0c;我们上次最后讲了三大数据类型&#xff0c;除了这三个之外&#xff0c;Python也有bool类型&#xff0c;也就是True和False。 a 2 print(a1) print(a2) 像这里&#xff0c;输出的内容第一个是False&#xff0c;因为a的值为2&#xff0c;而第…...

Polarctf2025夏季赛 web java ez_check

第一次自己做出一个java&#xff0c;值得小小的记录&#xff0c;polar的java真得非常友好 反编译jar包&#xff0c;一眼就看到有个/deserialize 路由&#xff0c;接受base64的序列化数据&#xff0c;base64解码后 经过一次kmp检查&#xff0c;再由SafeObjectInputStream来反序列…...

Vue:Form正则校验

目录 1. 只能输入正整数或正小数(保留三位小数) 1. 只能输入正整数或正小数(保留三位小数) cc: [{required: true, message: "钻杆长度不能为空", trigger: "blur" },{pattern: /^\d(\.\d{1,3})?$/, message: 只能输入正整数或正小数(保留三位小数), tri…...