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

文章目录

问题发现

点击按钮,没有想要的弹框

代码如下

修改 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组件

相关推荐
shawxlee7 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
jieyucx9 小时前
Nuxt4阶段六:工程化与进阶 —— 模块、中间件、插件、TS 与测试
中间件·vue·web·nuxt·全栈·ssr
jieyucx10 小时前
Nuxt4阶段五:渲染模式与性能优化
性能优化·vue·nuxt
csdn2015_18 小时前
nodejs安装
node.js·vue
jieyucx3 天前
Nuxt4阶段一:环境搭建与第一个 Nuxt 4 项目
vue·nuxt·全栈·ssr
小堂子这厢有礼了3 天前
Chet.Admin 模块详解②:用户管理与个人中心
vue·rbac·后台管理系统·用户权限·.net10·vbenadmin
sugar__salt4 天前
Vue.js 前置知识:ES6+ 核心特性完全指南
前端·javascript·vue.js·vue·es6
sugar__salt4 天前
Vue3 基础知识点整理 —— 从入门到响应式核心完全指南
vue.js·笔记·vue·vue3
钛态5 天前
前端安全防线:CSRF 攻击链路与双重 Token 校验的工程实现
前端·vue·react·web
zhz52145 天前
GIS项目中空间参考转换与MBTiles偏移:问题成因、解法与避坑
python·vue·gis