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

相关推荐
伍哥的传说6 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan15 小时前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘19 小时前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug2 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201302 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox
拾光拾趣录3 天前
如何高效判断DOM元素是否进入可视区域
前端·性能优化·dom
敲可耐的咕魂君3 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue
前端程序猿-秦祥3 天前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
sunbyte4 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel(图片轮播组件)
前端·javascript·vue.js·vue·ecmascript
百锦再4 天前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus