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

相关推荐
Watermelo6172 小时前
【前端实战】从 try-catch 回调到链式调用:一种更优雅的 async/await 错误处理方案
前端·javascript·网络·vue.js·算法·vue·用户体验
狼性书生2 小时前
uniapp实现的时间范围选择器组件
前端·uni-app·vue·组件·插件
Irene199113 小时前
CLI 与 Vite 创建项目对比(附:最优解 create-vue)
vue·vite·cli·项目创建
全栈前端老曹1 天前
【前端权限】 权限变更热更新
前端·javascript·vue·react·ui框架·权限系统·前端权限
今天不要写bug2 天前
基于qrcode前端实现链接转二维码的生成与下载
前端·javascript·typescript·vue
剑小麟2 天前
vue2项目中安装vant报错的解决办法
vue.js·java-ee·vue
你真的可爱呀2 天前
4.前后端联调(Vue3+Vite + Express + MySQL)
mysql·node.js·vue·express
前端老曹2 天前
vue3 三级路由无法缓存的终极解决方案
前端·javascript·vue.js·vue
行走的陀螺仪3 天前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
by__csdn3 天前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript