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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/864830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker-compose搭建prometheus、grafana

一、安装prometheus 1、安装 version: 3.1services:prometheus:image: prom/prometheus:v2.48.0container_name: prometheushostname: prometheusrestart: alwaysvolumes:- ./prometheus/prometheus.yml:/etc/prometheus/prometheus.yml- ./prometheus/:/etc/prometheus/port…

Spring Cloud Alibaba - 利用Nacos动态调整线程池参数

前提&#xff1a;搭建好cloud alibaba 与 nacos的集成 1 nacos中配置文件内容 core:size: 30 max:size: 50 2 线程配置类 import com.alibaba.cloud.nacos.NacosConfigManager; import com.alibaba.cloud.nacos.NacosConfigProperties; import com.alibaba.nacos.api.config…

第二篇——始计篇:“计”是最早的SWOT分析

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 第二次详读孙子兵法&#xff0c;当初听讲解的时候&#xff0c;就觉得自己…

WPF UI 3D 多轴 机械臂 stl 模型UI交互

鼠标交互&#xff08;没有强调场景的变换&#xff09; 鼠标命中测试&#xff08;HitTest 不推荐&#xff09; 平面对象加载 数据绑定&#xff08;数据与动作&#xff09; 环境配置与相关方法 模型准备&#xff1a;Blender/SolidWorks 模型导入 HelixToolkit更多案例…

驱动LSM6DS3TR-C实现高效运动检测与数据采集(6)----FIFO数据读取与配置

驱动LSM6DS3TR-C实现高效运动检测与数据采集.6--FIFO数据读取与配置 概述视频教学样品申请源码下载主要内容生成STM32CUBEMX串口配置IIC配置CS和SA0设置ICASHE修改堆栈串口重定向参考驱动程序FIFO参考程序初始化管脚获取ID复位操作设置量程BDU设置设置速率FIFO读取程序设置FIFO…

无忧易售升级:产品视频翻译支持,拓宽全球市场边界

在电商内容营销迈入视频时代的今天&#xff0c;无忧易售ERP推出针对OZON、Wish、TikTok、Wildberries&#xff08;野莓&#xff09;四大平台的产品视频翻译功能&#xff0c;彻底打破语言壁垒&#xff0c;让全球卖家的商品故事&#xff0c;以更生动、更直观的方式&#xff0c;触…

Web基础

Web基础与HTTP协议 web 就是我们所说的网页,打开网站展示的页面(全球广域网,又叫万维网) 分布式,图形信息系统,服务部署在不同的机器上且提供的服务和内容全部一致 分布式 计算系统或者是应用程序,分布在多台独立的计算机或者服务器上,他们之间通过计算机网络互相通信和写…

币界网讯,币安准备与SEC 展开长期法律对决

刚刚&#xff0c;数字货币交易所的领头羊Binance公布了法律策略&#xff0c;未来将会采取大胆举措与美国证券交易委员会 (SEC) 展开长期法律斗争&#xff0c;彰显其对监管合规的承诺。小编认为&#xff0c;Binance的这一战略立场是向美国SEC传递的道歉信&#xff0c;自从美国SE…

老机福音!最精简最快的Win7系统:免费下载!

有些老旧计算机因为配置较低&#xff0c;所以运作起来比较卡顿。有用户想知道安装哪些系统能提升老旧计算机的运行速度&#xff1f;系统之家小编推荐安装以下最精简最快的Win7系统版本&#xff0c;优化老旧计算机的性能&#xff0c;确保安装后时刻运作流畅稳定。 推荐一&#x…

8619 公约公倍

这个问题可以通过计算最大公约数 (GCD) 和最小公倍数 (LCM) 来解决。我们需要找到一个整数&#xff0c;它是 a, b, c 的 GCD 的倍数&#xff0c;同时也是 d, e, f 的 LCM 的约数。 以下是解决这个问题的步骤&#xff1a; 1. 计算 a, b, c 的最大公约数。 2. 计算 d, e, f 的最…

Java语法系列 小白入门参考资料 方法

方法的概念及使用 方法概念 方法出现的原因 在编程中&#xff0c;某段功能的代码可能频繁使用到&#xff0c;如果在每个位置都重新实现一遍&#xff0c;会&#xff1a; 1. 使程序变得繁琐 2. 开发效率低下&#xff0c;做了大量重复性的工作 3. 不利于维护&#xff0c;需要…

使用docfx生成API文档【生成c#帮助文档】

使用docfx生成API文档 docfx https://dotnet.github.io/docfx/ 下载docfx 下载docfx&#xff1a;链接 配置环境变量 这里使用的是windows环境&#xff0c;解压对应文件后&#xff0c;将文件夹路径添加到电脑的Path环境变量中。 配置成功后&#xff0c;启动cmd窗口&#…

115V 400HZ远机位电源车在国际机场的推广与应用

随着我国航空业的快速发展&#xff0c;对于远机位电源车的需求也越来越迫切。远机位电源车可以为飞机提供稳定、可靠的电力&#xff0c;确保飞机在停机、起降、航行等环节中正常运行。在当前的航空技术中&#xff0c;115V 400HZ 远机位电源车技术发展及其在航空领域的应用逐年增…

maketrans()方法——创建字符映射的转换表

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 maketrans()方法用于创建字符映射的转换表&#xff0c;对于接受两个参数的最简单的调用方式&#xff0c;第一个参数是字符串&#xff0c;表…

mongoTemplate的使用 列表查询

查询数据列表 Criteria criteria new Criteria(); Query query new Query(criteria); List<Document_Name> documents mongoTemplate.find(query, Document_Name.class, "collect_name");分页查询数据列表 Criteria criteria new Criteria(); Query quer…

atcoder ABC 357-D题详解

atcoder ABC 357-D题详解 Problem Statement For a positive integer N, let VN​ be the integer formed by concatenating N exactly N times. More precisely, consider N as a string, concatenate N copies of it, and treat the result as an integer to get VN​. For…

C++容器set和multiset使用详解

文章目录 1.set和multiset容器1.基本特性2.multiset容器3.set的构造和赋值1.构造函数2.赋值操作3.注意事项 4.set的大小和交换1.获取大小2.检查是否为空3.交换两个set4.示例综合 5.set容器插入和删除1.插入元素2.删除元素3.示例 6.set容器的查找和统计1.查找元素2.统计元素个数…

炎黄数智人:招商局集团推出AI数字员工“招小影”

引言 在全球数字化浪潮的推动下&#xff0c;招商局集团开启了一项具有里程碑意义的项目。招商局集团将引入AI数字员工“招小影”&#xff0c;这一举措不仅彰显了招商局集团在智能化转型方面的坚定决心&#xff0c;也为企业管理模式的创新注入了新的活力。 “招小影”是一款集成…

优化Java应用的数据库访问性能技巧

优化Java应用的数据库访问性能技巧 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨如何优化Java应用的数据库访问性能&#xff0c;提升系统的…

一文了解什么是车载Tbox

目录 前言一、Tbox是什么呢?二、Tbox架构三、App——TSP——Tbox交互时序图四、汽车混合网关拓扑结构示例五、Tbox功能 前言 强烈建议提前阅读一下这篇文章&#xff1a;车机Tbox介绍 一、Tbox是什么呢? Tbox是汽车上的一个盒子&#xff0c;指的是Telematics BOX&#xff0c…