问题来源
升级element-plus,绑定了v-model的popover点击outside不触发隐藏。如下图所示。
新旧源码分析
1.2.0-beta.6
popover 纯粹由 popper(逻辑管理)以及自身实现ui等状态管理。
我们可以看到这个版本的popper是直接把clickoutside,hide作为默认指令组合渲染,除非自身声明props trigger 为manual,manualMode为true。换言之我们v-model:visible是可以被外界修改且享受click outside消失。
2.1.6
popover 是由 eltooltip 向上封装而成。
这一个版本是否能clickoutside生效取决于两个变量controlled和trigger。我们关注点自然就集中在controlled的计算上,通过查看我们发现只要我们传入props visible,就会默认为受控。
解决方案
我们通过源码得知只要我们声明了visible我们就无法享受 clickoutside消失的行为,那么我们换个思路只要我们不声明就可以了。但是内部控制怎么办,答案就是通过ref直接调用popover的show/hide事件就能保持和以前一样的交互了。(这个也是popconfirm的内部实现的方案)
最后
如果作者有啥不对可以留言,创作不易点个赞呗👍