popover 弹出层组件源码,主要从一下四个方面来分享:

1、popover  组件页面结构。

2、popover  组件属性。

3、popover  组件 slot 挂载。

4、popover 组件事件。

一、组件页面结构。

二、组件属性。

2.1 trigger 触发方式,类型为 string,可选值 click/focus/hover/manual,默认值 click。

2.2 title 标题,类型为 string,无默认值。

2.3 content 显示的内容,类型为 string,无默认值。

2.4 width 宽度,类型为 string、number,默认 150px。

2.5 placement 出现的位置,类型为 string,可选值 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end,默认 bottom。

2.6 disabled popover 是否可用,类型为 boolean,默认 false。

2.7 value / v-model 状态是否可见,类型为 boolean,默认 false。

2.8 offset 出现位置的偏移量,类型为 number,默认 0。

2.9 transition 定义渐变动画,类型为 string,默认 fade-in-linear。

2.10 visible-arrow 是否显示箭头, 类型为 boolean,默认 true。

 2.11 popper-options popper.js 的参数,类型为 object,默认 { boundariesElement: 'body', gpuAcceleration: false }。

2.12 popper-class 为 popover 增加类名, 类型为 string,无默认值。

 2.13 open-delay 触发方式为 hover 时的显示延迟,单位为毫秒,类型为 number,默认 0。

2.14 close-delay 触发方式为 hover 时的隐藏延迟,单位为毫秒,类型为 number,默认 200。

 2.15 tabindex popover 组件的 tabindex,类型为 number,默认为 0。

三、slot 挂载。

2.8 reference 触发 Popover 显示的 HTML 元素。

四、事件。

4.1 show 显示时触发、hide 隐藏时触发。

4.2 after-enter 显示动画播放完毕后触发。

4.4 after-leave 隐藏动画播放完毕后触发。

Logo

中国智能体开发者社区,聚焦智能体与大模型开发,提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动,促进经验交流与协作,助力开发者快速构建创新智能应用。

更多推荐