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

相关推荐
五仁火烧13 小时前
生产环境中配置了接口3000后,不能启动,改成8080后就可以
linux·网络·安全·vue
我的golang之路果然有问题20 小时前
实习中遇到的 CORS 同源策略自己的理解分析
前端·javascript·vue·reactjs·同源策略·cors
刘联其20 小时前
Vue3+Vite +dotenvx读取.env文件参数
vue
椰果uu2 天前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue
小和尚敲木头2 天前
记录一次vue3中this引发的开发没有问题,生产发生问题的分析
前端·vue
PieroPc2 天前
用FastAPI 后端 和 Vue3 前端写一个博客系统 例
前端·vue·fastapi
Web项目开发2 天前
VitePress 创建技术文档
vue
四谎真好看3 天前
JavaWeb 学习笔记(Day02)之Vue
笔记·学习·vue·学习笔记·javaweb
Sapphire~3 天前
Vue3-04 自定义组件Person
vue
沐墨染3 天前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互