当前位置：首页 > news >正文

＜el-popover＞可以展示select change改变值的时候popover 框会自动隐藏

news 2025/7/15 2:00:30

一、问题定位

点击查看详细链接

element-plus 的 popover 组件，依赖 tooltip 组件；
当 tooltip 的 trigger 的值不是 hover 时，会触发 close 事件；
下拉框的 click 事件，触发了 tooltip 组件的 close 事件

总结一下，element 组件执行逻辑是：
点击下拉框，会绑定 click 的事件回调函数。
点击下拉选项，会执行 click 的回调函数：lisntener，以及内部的 handler 函数。handler 函数对应的代码在 tooltip 组件中。
执行 handler 时，由于tooltip 的 trigger 不为 hover，所以会执行 close 函数。这就导致了 popover 面板被关闭。

二、解决方案

将 select 下拉框的 DOM 放到 popover 内部，可以通过修改 el-select组件的 teleported 属性为 false 来实现。

三、案例代码

<el-popover placement="bottom" :width="300" trigger="click"><span>hello world</span><el-select v-model="value" :teleported="false"><el-option label="one" value="1"></el-option><el-option label="two" value="2"></el-option></el-select><div><el-button @click="okFn">确定</el-button><el-button @click="cancelFn">取消</el-button></div><template #reference><div><el-button>打开</el-button></div></template>
</el-popover>

四、总结

Vue3的 element-plus 相对于 Vue2 的 element-ui，popover组件的实现方式有较大变化：不使用vue-popper，而是直接用el-tooltip来实现。
element-plus的 popover 组件内部如果使用了el-select组件，需要确保 el-select 的 teleported 值为false，否则会出现展开select下拉框时，popover组件自动收起。
当遇到和浏览器事件有关的问题时，可以通过浏览器的event listener来打断点，快速找到事件回调。