记element-plus的popover组件的一个小bug

1,217 阅读1分钟

某日开发突然发现popover无法弹出,打开控制台一看,发现报错:

tree.vue:26 [Vue warn]: Invalid vnode type when creating vnode: undefined. 
  at <ElIcon> 
  at <ElInput modelValue="" onUpdate:modelValue=fn style= {width: '100%'}  ... > 
  at <ElOnlyChild key=0 class="el-tooltip__trigger" aria-describedby=undefined > 
  at <ElPopperTrigger id="el-id-7702-6" virtual-ref=undefined open=false  ... > 
  at <ElTooltipTrigger disabled=false trigger="click" virtual-ref=undefined  ... > 
  at <ElPopperRoot ref="popperRef" tabindex=0 auto-close=0 > 
  at <ElTooltip ref="tooltipRef" trigger="click" placement="bottom"  ... > 
  at <ElPopover visible=false onUpdate:visible=fn placement="bottom"  ... > 
  at <Tree style= {width: '100%'} modelValue="" onUpdate:modelValue=fn  ... > 
  at <ElFormItem label="存储位置" prop="folderId" > 

经过排查,发现是popover组件的reference插槽下有注释文本导致的。

image.png

去除注释后,完美解决问题。虽然解决了,但是slot可以识别注释文本,不应该有这个问题才对。查阅element-plus源码,发现问题所在:

image.png

image.png

image.png

很明显可以看到element-plus强制判断第一个节点是不是注释文本,个人感觉这样不是很好,应该遍历获取第一个非注释节点插入才对。这样明显不太合理,希望官方能早日修改哈