element-plus popover 升级变更

1,475 阅读1分钟

问题来源

升级element-plus,绑定了v-model的popover点击outside不触发隐藏。如下图所示。

popover.gif

新旧源码分析

1.2.0-beta.6

popover 纯粹由 popper(逻辑管理)以及自身实现ui等状态管理。

code.png

我们可以看到这个版本的popper是直接把clickoutside,hide作为默认指令组合渲染,除非自身声明props trigger 为manual,manualMode为true。换言之我们v-model:visible是可以被外界修改且享受click outside消失

2.1.6

popover 是由 eltooltip 向上封装而成。

code.png

这一个版本是否能clickoutside生效取决于两个变量controlled和trigger。我们关注点自然就集中在controlled的计算上,通过查看我们发现只要我们传入props visible,就会默认为受控。

解决方案

我们通过源码得知只要我们声明了visible我们就无法享受 clickoutside消失的行为,那么我们换个思路只要我们不声明就可以了。但是内部控制怎么办,答案就是通过ref直接调用popover的show/hide事件就能保持和以前一样的交互了。(这个也是popconfirm的内部实现的方案)

最后

如果作者有啥不对可以留言,创作不易点个赞呗👍