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

相关推荐
小葛要努力17 天前
安装nvm 管理node.js版本实现vue2和vue3项目共存
node.js·vue·nvm
这里是杨杨吖18 天前
SpringBoot+Vue高校在线考试系统 附带详细运行指导视频
vue·在线考试·springboot
wuxia211818 天前
在5种环境中编写点击元素改变内容和颜色的JavaScript程序
javascript·微信小程序·vue·jquery·react
Sweet锦18 天前
Vue3 集成 ApexCharts 避坑指南:从动画失效到自定义指令的完美解决方案
vue·echarts
王小王-12319 天前
基于深度学习的个性化音乐推荐系统的设计与开发
人工智能·深度学习·mysql·vue·推荐算法·个性化音乐推荐系统·音乐预测
alexander06819 天前
使用vite脚手架,快速创建一个vue3的项目
vue
toooooop821 天前
UniApp Vue2 动态修改 SCSS 伪类颜色
vue
这是个栗子21 天前
微信小程序开发(九)- uni-app微信小程序商城
微信小程序·小程序·uni-app·vue·vuex
鹤鸣的日常22 天前
前端运行时动态环境变量方案
前端·react.js·docker·前端框架·vue·gitlab
奥特曼超人Dujinyang22 天前
鸿蒙小程序渲染一致性与性能治理终极架构
react·鸿蒙·dom·arkweb·阻塞 ui·失焦问题·scroll渲染