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

相关推荐
机构师16 小时前
<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件
javascript·uni-app·vue·html
@AfeiyuO17 小时前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue
叫我阿柒啊21 小时前
Java全栈开发面试实战:从基础到微服务的完整技术栈解析
java·spring boot·微服务·前端框架·vue·jwt·全栈开发
凉白开<--1 天前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Zz_waiting.1 天前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
GISer_Jing1 天前
滴滴二面(准备二)
前端·javascript·vue·reactjs
F2E_Zhangmo1 天前
基于cornerstone3D的dicom影像浏览器 第一章 webpack5+vue2+cornerstonejs项目创建
vue·cornerstone·cornerstone3d·cornerstonejs
摇滚侠2 天前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin2 天前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue