信誉好的电商网站建设,网页设计与制作教程第5版,建设银行客户端官方网站,线上教育课程的网络营销方式一、问题定位
点击查看详细链接
element-plus 的 popover 组件#xff0c;依赖 tooltip 组件#xff1b;当 tooltip 的 trigger 的值不是 hover 时#xff0c;会触发 close 事件#xff1b;下拉框的 click 事件#xff0c;触发了 tooltip 组件的 close 事件 总结一下依赖 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 placementbottom :width300 triggerclickspanhello world/spanel-select v-modelvalue :teleportedfalseel-option labelone value1/el-optionel-option labeltwo value2/el-option/el-selectdivel-button clickokFn确定/el-buttonel-button clickcancelFn取消/el-button/divtemplate #referencedivel-button打开/el-button/div/template
/el-popover四、总结
Vue3的 element-plus 相对于 Vue2 的 element-uipopover组件的实现方式有较大变化不使用vue-popper而是直接用el-tooltip来实现。element-plus的 popover 组件内部如果使用了el-select组件需要确保 el-select 的 teleported 值为false否则会出现展开select下拉框时popover组件自动收起。当遇到和浏览器事件有关的问题时可以通过浏览器的event listener来打断点快速找到事件回调。
五、相关问题讨论
详情问题讨论链接
