[已解决]Vue3+Element-plus使用el-dialog对话框无法显示

news/2024/7/10 1:22:24 标签: vue, element-plus, el-dialog, DOM

文章目录

    • 问题发现
    • 原因分析
    • 解决方法

问题发现

点击按钮,没有想要的弹框
在这里插入图片描述
代码如下
在这里插入图片描述
修改 el-dialog到body中,还是不能显示
在这里插入图片描述

原因分析

使用devtool中vue工具进行查看组件结构
在这里插入图片描述
原因在于,在一个局部组件(Detail->ElTabPane->…)中使用el-dialog,这个局部组件实际DOM结构中层级较低,限制了遮罩的扩展,el-dialog是覆盖整个页面区域的组件。
应该在更高层级来显示el-dialog,可以使用Vuex、props+emit、事件总线(Event Bus)来控制它的显示与隐藏。

解决方法

回忆原来在较高DOM层级的组件(Detail)中也有使用el-dialog,我考虑使用Vuex中的state来保存弹窗显示状态、以及弹窗内容的选择(条件渲染),这样,两个场景下的弹窗都可以共用这一个el-dialog组件
在这里插入图片描述


http://www.niftyadmin.cn/n/5461470.html

相关文章

ComfyUI SDWebUI升级pytorch随记

目前使用的版本是去年10月的1.6版本,有点老。希望支持新的特性,于是乎开始作死。从升级torch开始。先看看已有的版本: (venv) rootubuntu-sd-server:~# pip show torch Name: torch Version: 2.0.1 Summary: Tensors and Dynamic neural net…

Linux 系统快速安装 nginx (新手版)

1、安装所需依赖 yum -y install pcre pcre-devel gcc openssl openssl-devel zlib zlib-devel (pcre: 包括 perl 兼容的正则表达式库 openssl: 支持安全传输协议https(和财务有关系的请求会走的协议) 创建运行用户、组 useradd -M -…

动态规划之子序列(二)

1035.不相交的线 我们在两条独立的水平线上按给定的顺序写下 A 和 B 中的整数。 现在,我们可以绘制一些连接两个数字 A[i] 和 B[j] 的直线,只要 A[i] B[j],且我们绘制的直线不与任何其他连线(非水平线)相交。 以这…

开源软件协议全解析:深入解读开源世界的“游戏规则”

在数字经济的浪潮下,开源软件已经成为软件行业的中流砥柱,为众多开发者提供了宝贵的资源和灵感。然而,开源软件并非“免费午餐”,背后隐藏着各种协议和法律约束。本文将深入剖析开源软件的各种协议,为开发者提供一份详…

封装Redis工具类

3.1、封装Redis工具类 基于StringRedisTemplate封装一个缓存工具类,满足下列需求: 方法1:将任意Java对象序列化为json并存储在string类型的key中,并且可以设置TTL过期时间方法2:将任意Java对象序列化为json并存储在s…

QT-自定义参数设计框架软件

QT-自定义参数设计框架软件 前言一、演示效果二、使用步骤1.应用进行参数注册2.数据库操作单例对象3.参数操作单例对象 三、下载链接 前言 常用本地数据参数通常使用的是xml等文本的格式,进行本地的数据参数的存储。这种参数的保存方式有个致命的一点,就…

import关键字的使用

- import : 导入 - import语句来显式引入指定包下所需要的类。相当于import语句告诉编译器到哪里去寻找这个类。为了使用定义在其它包中的 Java 类,需用 import 语句来显式引入指定包下所需要的类。相当于 import 语句告诉编译器到哪里去寻找这个类 。 语法格式 …

docker无脑部署zabbix6.0+agent

文章目录 前言一、安装docker-compose二、部署Zabbix Server 6.0agent1.创建父目录2.拉取镜像3.编辑docker-compose.yml文件 二、浏览器访问Zabbix1.url栏输入http://ip/2.修改主机配置 总结 前言 随着监控的不断发展,zabbix这门技术也越来越重要,很多人…