触发器 Trigger
跟随鼠标显示弹出框
Section titled “跟随鼠标显示弹出框”设置align-point属性，可以使弹出层出现在鼠标位置。
显示箭头元素
Section titled “显示箭头元素”通过show-arrow属性，可以展示默认的箭头元素。也可以通过arrow-class或arrow-style进行定制。
这个例子展示了触发器的最基础的使用。触发器默认是没有弹出框的样式的。以下示例均为官网添加的样式。
弹出层可以嵌套在另一个弹出层内。
通过设置 update-at-scroll 监听容器的滚动。
通过popup-translate属性，可以设置弹窗在原本位置的基础上进行额外的位置调整。
多个触发方式
Section titled “多个触发方式”通过trigger传入数组，可以设置多个触发方式。
Floating UI 定位配置
Section titled “Floating UI 定位配置”floating-options 会原样传给 @floating-ui/vue 的 useFloating()。它与旧定位属性冲突时以 Floating UI 配置为准；middleware 会完整替换默认中间件。详见 Floating UI 迁移指南。
<trigger> Props
Section titled “<trigger> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| popup-visible (v-model) | 弹出框是否可见 | boolean |
- |
|
| default-popup-visible | 弹出框默认是否可见（非受控模式） | boolean |
false |
|
| trigger | 触发方式 | 'hover' | 'click' | 'focus' | 'contextMenu' |
'hover' |
|
| position | 弹出位置 | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb' |
'bottom' |
|
| floating-options | 原样传给 Floating UI useFloating() 的配置，显式字段优先于旧定位属性 |
FloatingOptions |
- |
|
| disabled | 触发器是否禁用 | boolean |
false |
|
| popup-offset | 弹出框的偏移量（弹出框距离触发器的偏移距离） | number |
0 |
|
| popup-translate | 弹出框的移动距离 | TriggerPopupTranslate |
- |
|
| show-arrow | 弹出框是否显示箭头 | boolean |
false |
|
| align-point | 弹出框是否跟随鼠标 | boolean |
false |
|
| popup-hover-stay | 是否在移出触发器，并移入弹出框时保持弹出框显示 | boolean |
true |
|
| blur-to-close | 是否在触发器失去焦点时关闭弹出框 | boolean |
true |
|
| click-to-close | 是否在点击触发器时关闭弹出框 | boolean |
true |
|
| click-outside-to-close | 是否在点击外部区域时关闭弹出框 | boolean |
true |
|
| unmount-on-close | 是否在关闭时卸载弹出框节点 | boolean |
true |
|
| content-class | 弹出框内容的类名 | string|array|object |
- |
|
| content-style | 弹出框内容的样式 | CSSProperties |
- |
|
| arrow-class | 弹出框箭头的类名 | string|array|object |
- |
|
| arrow-style | 弹出框箭头的样式 | CSSProperties |
- |
|
| popup-style | 弹出框的样式 | CSSProperties |
- |
|
| animation-name | 弹出动画的name | string |
'fade-in' |
|
| duration | 弹出动画的持续时间 | number| { enter: number; leave: number; } |
- |
|
| mouse-enter-delay | mouseenter事件延时触发的时间（毫秒） | number |
100 |
|
| mouse-leave-delay | mouseleave事件延时触发的时间（毫秒） | number |
100 |
|
| focus-delay | focus事件延时触发的时间（毫秒） | number |
0 |
|
| auto-fit-popup-width | 是否将弹出框宽度设置为触发器宽度 | boolean |
false |
|
| auto-fit-popup-min-width | 是否将弹出框的最小宽度设置为触发器宽度 | boolean |
false |
|
| auto-fix-position | 当触发器的尺寸发生变化时，是否重新计算弹出框位置 | boolean |
true |
|
| popup-container | 弹出框的挂载容器 | string | HTMLElement |
- |
|
| update-at-scroll | 是否在容器滚动时更新弹出框的位置 | boolean |
false |
|
| auto-fit-position | 是否自动调整弹出框位置，以适应窗口大小 | boolean |
true |
|
| render-to-body | 是否挂载在 body 元素下 |
boolean |
true |
|
| prevent-focus | 是否阻止弹出层中的元素点击时获取焦点 | boolean |
false |
|
| scroll-to-close | 是否在滚动时关闭弹出框 | boolean |
false |
2.46.0 |
| scroll-to-close-distance | 滚动阈值，当滚动距离超过该值时触发关闭 | number |
0 |
<trigger> Events
Section titled “<trigger> Events”| 事件名 | 描述 | 参数 | 版本 |
|---|---|---|---|
| popup-visible-change | 弹出框显示状态改变时触发 | visible: boolean |
|
| show | 弹出框显示后（动画结束）触发 | - | 2.18.0 |
| hide | 弹出框隐藏后（动画结束）触发 | - | 2.18.0 |
<trigger> Slots
Section titled “<trigger> Slots”| 插槽名 | 描述 | 参数 |
|---|---|---|
| content | 弹出框内容 | - |
type TriggerPopupTranslate = [number, number] | { [key in TriggerPosition]?: [number, number] };关于弹出框的挂载位置
Section titled “关于弹出框的挂载位置”弹出框默认是挂载到 body 元素上的，如果想要修改挂载元素，可以使用 popup-container 属性进行指定，同时需要注意保证挂载元素的位置可以被准确定位到，一般可以为挂载元素增加 position: relative 样式。
在微前端项目中，需要保证子应用的挂载位置准确，可以将子应用的 body 样式添加 position: relative
滚动触发容器
Section titled “滚动触发容器”组件默认仅监听了 window 的滚动事件，对于内部 div 的滚动没有进行监听，类似 scroll-to-close 功能也仅会对 window 滚动生效。可以通过开启 update-at-scroll 属性支持对父级 div 元素的滚动事件监听。