[已解决]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 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
wuaro1 天前
RBAC权限控制具体实现
前端·javascript·vue
前端互助会2 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
zy0101013 天前
React 直接操作 DOM
前端·javascript·react.js·dom·react操作dom
YiHanXii3 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生4 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎4 天前
Vue3当中el-tree树形控件使用
vue
Num_9_G7 天前
使用vue cli 5.0 在vscode中运行vue命令报错
vue
雪碧聊技术7 天前
element-plus中Cascader级联选择器组件的使用
element-plus·cascader 级联选择器