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

相关推荐
蓝黑20205 小时前
Vue组件通信之v-model
前端·javascript·vue
不会写DN8 小时前
Vue3中的computed 与 watch 的区别
javascript·面试·vue
钛态11 小时前
前端WebSocket实时通信:别再用轮询了!
前端·vue·react·web
蓝黑202012 小时前
Vue组件通信之slot
前端·javascript·vue
蓝黑20201 天前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小彭努力中1 天前
204.Vue3 + OpenLayers:加载 GIF 文件(CSS 背景实现动画标记)
前端·css·vue·openlayers·geojson·webgis
陶甜也2 天前
3D智慧城市:blender建模、骨骼、动画、VUE、threeJs引入渲染,飞行视角,涟漪、人物行走
前端·3d·vue·blender·threejs·模型
菜鸟茜2 天前
Vue3 + Element Plus 省市区县级联组件封装,支持 v-model 双向绑定 + 回显,可直接复用
vue3·element-plus·组件封装·前端复用·省市区县级联
NPCZ2 天前
vite与tailwindcss创建大屏可视化项目
vue
蓝黑20202 天前
Vue导入和注册组件
前端·javascript·vue