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

el-dialog设置append-to不生效；el-dialog设置挂载层级

news 来源：原创 2025/9/2 3:13:29

文章目录

- 一、场景
- 二、注意点
- - 1. append-to-body何时为true
  - 2.设置层级，遮罩层大小不生效
  - 3.相关代码
- 三、ElMessageBox遮罩层

效果：

一、场景

正常情况下，el-dialog的弹框是挂载在body下的，导致我们会有修改样式或者修改弹框的遮罩层的需求，例如让弹框的遮罩层在某个具体的div下，不影响其他位置的点击使用

使用append-to-body和append-to实现
append-to-body:是否挂载在body下，
append-to：具体挂载在哪个class元素下

二、注意点

1. append-to-body何时为true

当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。

当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true

2.设置层级，遮罩层大小不生效

需要给对应的绑定class元素设置style="transform:scale(1);"样式

3.相关代码

style="transform:scale(1);":append-to-body="!Visible"
:append-to="!Visible ? 'body' : '.page_append_to_class'" 
v-model="Visible"

三、ElMessageBox遮罩层

ElMessageBox也可以通过appendToBody和appendTo实现挂载div需求
在这里插入图片描述

  ElMessageBox.confirm("上传当前文件将覆盖之前上传文件！您确认要上传吗？", "警告", {appendToBody: 'false',appendTo:".append_to_class",confirmButtonText: "确认",cancelButtonText: "取消",type: "warning"}).then(() => {})

el-dialog设置append-to不生效；el-dialog设置挂载层级

文章目录一、场景二、注意点1. append-to-body何时为true2.设置层级，遮罩层大小不生效3.相关代码三、ElMessageBox遮罩层效果： 一、场景正常情况下，el-dialog的弹框是挂载在body下的，导致我们会有修改样式或者修改弹框的遮罩…...

编程日记 2025/9/2 3:13:29

互联网软件开发自动化平台的多维度对比分析，涵盖架构、功能、适用场景、成本等关键指标

以下是关于互联网软件开发自动化平台的详细解析，涵盖其核心概念、主流平台的功能、架构设计、适用场景及对比分析： 一、自动化平台的定义与核心目标自动化平台（如CI/CD平台）是用于持续集成（CI） 和持续…...

编程日记 2025/8/26 21:50:07

UE5 制作方块边缘渐变边框效果

该效果基于之前做的（https://blog.csdn.net/grayrail/article/details/144546427）进行修改得到，思路也很简单： 1.打开实时预览 1.为了制作时每个细节调整方便，勾选Live Update中的三个选项，开启实时预览。…...

编程日记 2025/9/2 3:09:08

深入探究 GRU 模型：梯度爆炸问题剖析

在深度学习领域，循环神经网络（RNN）及其变体在处理序列数据时展现出了强大的威力。其中，门控循环单元（GRU）作为 RNN 的一种进阶架构，备受关注。今天，咱们就来深入聊聊 GRU 模型&#…...

编程日记 2025/9/2 3:09:13

生成对抗网络（GAN）原理详解

生成对抗网络（GAN）原理详解 1. 背景生成对抗网络（Generative Adversarial Network, GAN）由 Ian Goodfellow 等人于 2014 年提出，是一种通过对抗训练生成高质量数据的框架。其核心思想是让两个神经网络（生…...

编程日记 2025/9/2 3:11:25

CFD中的动量方程非守恒形式详解

在计算流体力学（CFD）中，动量方程可以写成守恒形式和非守恒形式，两者在数学上等价，但推导方式和应用场景不同。以下是对非守恒形式的详细解释： 1. 动量方程的守恒形式首先回顾守恒形式的动量方程&#xff…...

编程日记 2025/9/2 3:11:56

AIoT 智变浪潮演讲实录 | 刘浩然：让硬件会思考：边缘大模型网关助力硬件智能革新

4 月 2 日，由火山引擎与英特尔联合主办的 AIoT “智变浪潮”技术沙龙在深圳成功举行，活动聚焦 AI 硬件产业的技术落地与生态协同，吸引了芯片厂商、技术方案商、品牌方及投资机构代表等 700 多位嘉宾参会。会上，火山引擎边缘智能高…...

编程日记 2025/9/2 3:11:26

4.B-树

一、常见的查找方式顺序查找 O(N) 二分查找 O(logN)（要求有序和随机访问）二叉搜索树 O(N) 平衡二叉搜索树(AVL树和红黑树) O(logN) 哈希 O(1) 考虑效率和要求而言，正常选用平衡二叉搜索树和哈希作为查找方式。但这两种结构适合用于数据量相对不是很大，能够一次性…...

编程日记 2025/8/31 4:19:56

怎么看英文论文 pdf沉浸式翻译

https://arxiv.org/pdf/2105.09492 Immersive Translate Xournal打开...

编程日记 2025/8/27 0:28:57

计算机三级第一章：信息安全保障概述（以时间节点推进的总结）

淡蓝色为必背内容第一阶段：电讯技术的发明19世纪30年代：电报电话的发明 1835年：莫尔斯（Morse）发明了电报 1837年：莫尔斯电磁式有线电报问世 1878年：人工电话交换局出现 1886年：马可尼发明了无线电报机 1876年：贝尔（Bell）发明了电话机 1892年，史瑞桥自动交换…...

编程日记 2025/9/2 3:11:57

车载软件架构 ---单个ECU的AUTOSAR开发流程

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：周末洗了一个澡，换了一身衣服，出了门却不知道去哪儿，不知道去找谁，漫无目的走着，大概这就是成年人最深的孤独吧! 旧人不知我近况，新人不知我过…...

编程日记 2025/9/2 3:10:03

【场景应用7】在TPU上使用Flax/JAX对Transformers模型进行语言模型预训练

在本笔记本中，我们将展示如何使用Flax在TPU上预训练一个🤗 Transformers模型。这里将使用GPT2的因果语言建模目标进行预训练。正如在这个基准测试中所看到的，使用Flax/JAX在GPU/TPU上的训练通常比使用PyTorch在GPU/TPU上的训练要快得多，而且也可以显著降低成本。 Fla…...

编程日记 2025/8/26 8:57:59

C++运算符重载全面总结

C运算符重载全面总结运算符重载是C中一项强大的特性，它允许程序员为自定义类型定义运算符的行为。以下是关于C运算符重载的详细总结： 一、基本概念 1. 什么是运算符重载运算符重载是指为自定义类型（类或结构体）重新定义或重…...

编程日记 2025/9/1 14:58:45

PTA | 实验室使用排期

目录题目： 输入格式： 输出格式： 输入样例： 输出样例： 样例解释： 代码： 无注释版： 有注释版： 题目： 受新冠疫情影响，当前大家的活动都…...

编程日记 2025/8/30 8:07:03

3.7 字符串基础

字符串 （str）：和列表用法基本一致 1.字符串的创建 -str转换(字符串，可用于将其他字符类型转换为字符串) -单引号双引号三引号 2.索引 3.字符串的切片 4.字符串的遍历 5.字符串的格式化 6.字符串的运算符 7.字符串的函数 #…...

编程日记 2025/9/2 3:10:04

《 C++ 点滴漫谈：三十三》当函数成为参数：解密 C++ 回调函数的全部姿势

一、前言在现代软件开发中，“解耦” 与 “可扩展性” 已成为衡量一个系统架构优劣的重要标准。而在众多实现解耦机制的技术手段中，“回调函数” 无疑是一种高效且广泛使用的模式。你是否曾经在编写排序算法时，希望允许用户自定义排序规则&a…...

编程日记 2025/8/26 13:28:35

16bit转8bit的常见方法（图像归一化）

文章目录 16-bit转8-bit的常用方法一、数据类型转换：image.astype(np.uint8) —— 若数值 x 超出 0-255 范围，则取模运算。如：x 600 % 256 88二、截断函数：np.clip().astype(np.uint8) —— 若数值 x 超出 0-255 范围&#xff0…...

编程日记 2025/9/2 3:11:27

消息中间件kafka,rabbitMQ

在分布式系统中，消息中间件是实现不同组件之间异步通信的关键技术。Kafka 和 RabbitMQ 是两个非常流行的消息中间件系统，它们各自有着不同的特点和应用场景。下面将分别介绍 Kafka 和 RabbitMQ，并讨论它们在消息队列中的使用。一、Kafka (Apache Kafka) 主要特点: 高吞吐…...

编程日记 2025/8/26 18:11:54

C语言编译预处理3

条件编译：是对源程序的一部分指定编译条件，满足条件进行编译否则不编译。形式1 #indef 标识符程序段1 #else 程序段2 #endif 标识符已经被定义用#ifdef #include <stdio.h>// 可以通过注释或取消注释下面这行来控制是否定义 DEBUG 宏 // …...

编程日记 2025/8/27 9:32:03

数据结构·树

树的特点最小连通图无环有且只有 n − 1 n-1 n−1 条边树的建立方式顺序存储只适用于满n叉树，完全n叉树 1<<n 表示结点 2 n 2^n 2nP4715 【深基16.例1】淘汰赛 void solve() {cin >> n;for (int i 0; i<(1<<n); i) {cin >&g…...

编程日记 2025/9/2 3:11:25

1.先创建queue.h声明文件(Linux命令：touch queue.h)。编写函数声明如下(打开文件 Linux 操作命令：vim queue.h): //头文件 #ifndef __QUEUE_H__ #define __QUEUE_H__ //队列 typedef struct queue{int* arr;int in;int out;int cap;int size; }queue_t;…...

编程日记 2025/9/2 3:11:56

48V/2kW储能电源纯正弦波逆变器详细设计方案-可量产

48V/2kW储能电源纯正弦波逆变器详细设计方案 1.后级驱动电路图 2.前级驱动电路图 3.功率表电路原理图 4.功率板BOM: 5.后级驱动BOM 6.前级驱动BOM...

编程日记 2025/8/27 6:42:00

[redis进阶二]分布式系统之主从复制结构(2)

目录一 redis的拓扑结构 (1)什么是拓扑 (2)⼀主⼀从结构 (3)⼀主多从结构 (4)树形主从结构 (5)三种拓扑结构的优缺点,以及适用场景二 redis的复制原理 (1)复制过程 (2)数据同步psync replicationid/replid (复制id)(标注同步的数据来自哪里:数据来源) offset (偏移…...

编程日记 2025/8/28 0:20:47

Playwright多语言生态：跨Python_Java_.NET的统一采集方案

一、问题背景：爬虫多语言割裂的旧时代在大规模数据采集中，尤其是学术数据库如 Scopus，开发者常遇到两个经典问题： 技术语言割裂：Python开发人员使用Selenium、requests-html等库；Java阵营使用Jsoup或Htm…...

编程日记 2025/8/28 4:08:33

day30 第八章贪心算法 part04

452. 用最少数量的箭引爆气球先排序，再算重叠区间 class Solution:def findMinArrowShots(self, points: List[List[int]]) -> int:if len(points)0:return 0points.sort(keylambda x:x[0])result 1for i in range(1, len(points)):if points[i][0] > point…...

编程日记 2025/9/2 1:07:29

java操作redis库，开箱即用

application.yml spring:application:name: demo#Redis相关配置redis:data:# 地址host: localhost# 端口，默认为6379port: 6379# 数据库索引database: 0# 密码password:# 连接超时时间timeout: 10slettuce:pool:# 连接池中的最小空闲连接min-idle: 0# 连接池中的最…...

编程日记 2025/8/28 5:56:20

clickhouse中的窗口函数

窗口函数边界核心参数窗口边界通过 ROWS、RANGE 或 GROUPS 模式定义，语法为： ROWS BETWEEN AND 基于物理行位置定义窗口，与排序键的实际值无关，适用于精确控制窗口行数 – 或 RANGE BETWEEN AND 基于排序键的数值范围定义窗口，适用于时间序列或连续数值的场景（…...

编程日记 2025/8/28 0:19:50

YZ系列工具之YZ02:字典的多功能应用

我给VBA下的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。我的教程一共九套一部VBA手册，教程分为初级、中级、高级三大部分。是对VBA的系统讲解，从简单的…...

编程日记 2025/8/27 18:20:33

金山科技在第91届中国国际医疗器械博览会CMEF 首发新品展现智慧装备+AI

4月8日—11日，国家会展中心（上海），第91届中国国际医疗器械（春季）博览会（以下简称“CMEF 2025”）举办。金山科技在盛会上隆重推出年度新品——全高清电子内镜光学放大镜与肛肠测压系统…...

编程日记 2025/9/2 3:13:29

STM32 BOOT设置，bootloader，死锁使用方法

目录 BOOT0 BOOT1的配置含义 bootloader使用方法芯片死锁解决方法开发调试过程中，由于某种原因导致内部Flash锁死，无法连接SWD以及JTAG调试，无法读到设备，可以通过修改BOOT模式重新刷写代码。修改为BOOT01，BOOT10…...

编程日记 2025/9/2 3:10:03

机器学习：让数据开口说话的科技魔法

在人工智能飞速发展的今天，「机器学习」已成为推动数字化转型的核心引擎。无论是手机的人脸解锁、网购平台的推荐系统，还是自动驾驶汽车的决策能力，背后都离不开机器学习的技术支撑。那么，机器学习究竟是什么？它又有哪…...

编程日记 2025/9/2 3:13:29

PDF解析示例代码学习

以下是结合多种技术实现的PDF解析详细示例（Python实现），涵盖文本、表格和扫描件处理场景： 一、环境准备与依赖安装 # 核心依赖库 pip install pdfplumber tabula-py pytesseract opencv-python mysql-connector-python 二、完整…...

编程日记 2025/9/2 3:11:25

【云平台监控】安装应用Ansible服务

安装应用Ansible服务文章目录安装应用Ansible服务资源列表基础环境一、安装Ansible1.1、部署Ansible1.2、配置主机清单1.2.1、方法11.2.2、方法2 二、Ansible命令应用基础2.1、ping模块2.2、command模块2.3、user模块2.4、group模块2.5、cron模块2.6、copy模块2.7、file模块2…...

编程日记 2025/9/2 3:11:25

项目执行中的目标管理：从战略到落地的闭环实践

——如何让目标不“跑偏”、团队不“掉队”？ 引言：为什么目标管理决定项目成败？ 根据PMI研究，47%的项目失败源于目标模糊或频繁变更。在复杂多变的项目环境中，目标管理不仅是制定KPI，更是构建“方向感-执行…...

编程日记 2025/9/2 3:11:56

如何优雅地处理 API 版本控制？

API 会不断发展，而用户的需求也会随之变化。那么，如何确保你的 API 在升级时不会影响现有用户？答案就是：API 版本控制。就像你更新了一个应用程序，引入了新功能，但旧功能仍然保留，让老用户继续愉…...

编程日记 2025/9/2 3:09:09

如何通过Radius认证服务器实现虚拟云桌面安全登录认证：安当ASP身份认证系统解决方案

引言：虚拟化时代的安全挑战随着云计算和远程办公的普及，虚拟云桌面（如VMware Horizon、Citrix）已成为企业数字化办公的核心基础设施。然而，传统的用户名密码认证方式暴露了诸多安全隐患：弱密码易被暴力破…...

编程日记 2025/9/2 3:09:11

自然语言处理spaCy

spaCy 是一个流行的开源自然语言处理（NLP） 库，专注于高效、易用和工业化应用。它由 Explosion AI 开发，广泛应用于文本处理、信息提取、机器翻译等领域。 zh_core_web_sm 是 spaCy 提供的一个小型中文预训练语言模型&#xff0…...

编程日记 2025/8/31 4:10:11

大语言模型（LLMs）中的强化学习（Reinforcement Learning, RL）

第一部分：强化学习基础回顾在深入探讨LLMs中的强化学习之前，我们先快速回顾一下强化学习的核心概念，确保基础扎实。 1. 强化学习是什么？ 强化学习是一种机器学习范式，目标是让智能体（Agent）…...

编程日记 2025/8/25 21:32:52

数字后端实现Innovus DRC Violation之如何利用脚本批量解决G4:M7i DRC Violation

大家在跑完物理验证calibre DRC之后，会发现DRC里面存在一种G4:M7i的DRC违例，这种违例一般都是出现在memory的边界。今天教大家如何利用脚本来批量处理这一类DRC问题的解决。首先，我们需要把calibre的DRC结果读取到innovus里面来&#xff0c…...

编程日记 2025/8/26 10:38:43

Java版企业电子招标采购系统源业码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理：所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含：招标公告、非招标公告、系统通知、政策法规。 2、立项管理：企业用户可对需要采购的项目进行立项申请，并提交审批，查看所…...

编程日记 2025/8/28 7:29:44

CTF web入门之文件上传

知识点产生文件上传漏洞的原因原因：对于上传文件的后缀名（扩展名）没有做较为严格的限制对于上传文件的MIMETYPE(用于描述文件的类型的一种表述方法) 没有做检查权限上没有对于上传的文件目录设置不可执行权限，（尤其是对于shebang类型的文件）对于web server对于上传…...

编程日记 2025/8/31 9:51:25

ArmSoM Sige5 CM5：RK3576 上 Ultralytics YOLOv11 边缘计算新标杆

在计算机视觉技术加速落地的今天，ArmSoM 正式宣布其基于 Rockchip RK3576 的旗舰产品 Sige5 开发板和 CM5 核心板全面支持 Ultralytics YOLOv11 模型的 RKNN 部署。这一突破标志着边缘计算领域迎来新一代高性能、低功耗的 AI 解决方案&am…...

编程日记 2025/8/27 22:26:00

游戏引擎学习第224天

回顾游戏运行并指出一个明显的图像问题。回顾一下之前那个算法我们今天要做一点预加载的处理。上周刚完成了游戏序章部分的所有剪辑内容。在运行这一部分时，如果观察得足够仔细，就会注意到一个问题。虽然因为视频流压缩质量较低，很难清楚…...

编程日记 2025/8/31 13:25:24

PN1-S25系列ProfiNet网关模组产品方案

PN1-S25系列ProfiNet网关模组是一款专为工业通信环境设计的先进设备，旨在实现ProfiNet与Modbus RTU协议之间的无缝转换，从而优化工业自动化系统中的数据传输效率。以下是对该系列ProfiNet网关模组产品的详细介绍： 一、ProfiNet网关模组功能特…...

编程日记 2025/8/29 12:41:44

提示工程指南学习记录（三）

提示词示例文本概括 Explain the above in one sentence（用一句话解释上面的信息）： 提示词工程是一种用于自然语言处理的任务，目的是通过给定的文本或语音输入来生成相应的输出。它基于预训练的大型语言模型，例如通…...

编程日记 2025/8/28 8:27:21

04 GE - 钳制属性，等级

1.PostGameplayEffectExecute 1.作用：在这里对生命值进行最后的钳制防止越界。 2.参数中有什么： FGameplayEffectModCallbackData //传进来的值 {EffectSpec; //GESpecTargetASC //目标ASCFGameplayModifierEvaluatedData& EvaluatedData{Magni…...

编程日记 2025/8/26 15:37:04