[已解决]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组件

相关推荐
尚学教辅学习资料1 天前
Vue3从入门到精通: 4.5 数据持久化与同步策略深度解析
vue·数据持久化
IT毕设实战小研2 天前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计
第七种黄昏2 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
har01d3 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
har01d4 天前
【CSS3】录音中。。。
前端·css·vue.js·vue·vue3·css3
柯北(jvxiao)5 天前
Vue vs React 多维度剖析: 哪一个更适合大型项目?
前端·vue·react
晓13136 天前
Vue2篇——第二章 Vue从指令修饰符到侦听器的全面解析(重点)
前端·javascript·vue
Kevin@wust6 天前
axios的封装
前端·vue
夏小花花6 天前
Java 日常开发笔记(小程序页面交互传参-id)
java·微信小程序·vue
狼性书生7 天前
uniapp实现的圆形滚盘组件模板
前端·uni-app·vue·组件