文章目录
- 问题发现
- 原因分析
- 解决方法
问题发现
点击按钮，没有想要的弹框
代码如下
修改 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组件
