建德网站建设公司线上广告
一、问题定位
点击查看详细链接
- 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来打断点，快速找到事件回调。
五、相关问题讨论
详情问题讨论链接