Skip to content

useFloating

@floating-ui/dom 的薄封装:把浮层定位到参照元素旁。LxTooltip / usePopover 内部即用它。

用法

ts
import { useFloating } from '@luxeanor/ui'

const { update } = useFloating(referenceEl, floatingEl, 'top')
// 浮层显示后调用(通常 await nextTick() 之后):
await update()

API

useFloating(reference: Ref<HTMLElement | null>, floating: Ref<HTMLElement | null>, placement: Placement = 'bottom-start'): { update: () => Promise<void> }

参数说明
reference参照元素
floating浮层元素(定位结果写入其 style.left/top
placement@floating-ui Placement(如 'top''bottom-start'

行为:中间件固定 offset(6) + flip() + shift({ padding: 8 })——留 6px 间距、空间不足自动翻边、贴边时平移避让;元素消失时安全跳过。