Popover
锚在触发元素旁、不加遮罩的浮层(分享、导出、取色这类面板)。开合、焦点收放、Esc、点外面关闭、翻面与贴边都交给 Reka UI 的 Popover,本组件只做样式与两个开关。
触发器放进 trigger 插槽,开合由组件接管——不要在触发按钮上再写 @click="open = !open",会与组件自己的切换抵消。组件上的属性与 class 落在浮层内容上,宽度直接写 class(class="w-72")。
基础
点触发器开合,点外面或 Esc 关闭
点外面不关 + 高度过渡
:dismiss-on-outside="false" 给「边开着边改底下内容」的面板用,Esc 与再点触发器照常关。animate-height 让内容变高变矮时顶边钉住、只有底边带过渡伸缩——居中弹窗换内容时上下两边一起动、标题跟着跳,锚定浮层不该这样。
导出面板:切换格式时底边伸缩
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
side | "bottom" | "top" | "right" | "left" | undefined | "bottom" | — |
align | "start" | "center" | "end" | undefined | "center" | — |
sideOffset | number | undefined | 8 | 与触发器的间距(px) |
modal | boolean | undefined | false | 模态:抢焦点、挡外面的交互 |
dismissOnOutside | boolean | undefined | true | 点外面关不关。「边开着边改底下内容」的面板(导出、分享)关掉它;Esc 与再点触发器照常关 |
animateHeight | boolean | undefined | false | 内容变高变矮时顶边钉住、底边带过渡伸缩 |
open | boolean | undefined | false | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:open | [value: boolean] | — |
Slots
| 插槽 | 说明 |
|---|---|
trigger | — |
default | — |