修复ElementUI的el-popconfirm组件不显示的bug

这两天在写一个项目,要使用到ElementUI新出的popconfirm组件,但是我在我的项目中使用后,组件并不显示。

于是用chrome的控制台检查了下元素后,发现popconfirm是能被加载出来的,但是button元素位于 display: none; 的 .el-popover 元素中,所以才无法显示。

Vue调试工具里也能查到有这个元素

Chrome的控制台里也没相关报错

随后又去看了下官方的demo,发现官方demo的按钮控件是在 .el-popover 外的。

于是感觉是 ElementUI 或者 Vue 的版本问题导致的。

随后,我去官网查了下,发现 popconfirm 是上两个版本才新加入的。

查看了下,发现vue版本已经是比较旧的 2.5.2 ,于是尝试升级到最新的 2.6.11 ,webpack重新编译后发现 el-popconfirm 组件能正常使用。


看了下 el-popconfirm 组件的源码后发现,el-popover 是基于ElementUI的另一个组件 el-popover 和 slot 实现的,所以我猜测是 vue 的 slot 机制改版了,才导致 el-popconfirm 无法正常显示。


这里值得注意的是,在 package.json 里手动指定 vue 版本来更新 vue 的话,记得把 vue-template-compiler 的版本也更新到与 vue 版本相同,否则会提示 vue 组件版本不一致。

0 条评论

昵称

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

与博主谈论人生经验?