useLayer
@astryxdesign/core v0.7.1 · useLayer
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | 'context' | 'fixed' | 必填 | 定位方式:context 跟着锚点元素,fixed 用 x / y 给的坐标。 |
anchor | Ref<HTMLElement | null> | — | context 模式下外部的锚点元素。不传就把返回的 anchorRef 绑到触发器上。 |
placement | 'above' | 'below' | 'start' | 'end' | MaybeRefOrGetter | 'below' | 浮层落在锚点的哪一侧。逻辑方向:start / end 在 RTL 下自动镜像。空间不够时翻到对面。 |
alignment | 'start' | 'center' | 'end' | MaybeRefOrGetter | 'center' | 沿方位轴的对齐方式。 |
gap | number | 4 | 浮层与锚点之间的空隙,单位 px。 |
x | number | MaybeRefOrGetter | 0 | fixed 模式的横向视口坐标。 |
y | number | MaybeRefOrGetter | 0 | fixed 模式的纵向视口坐标。 |
isDefaultOpen | boolean | false | 首次渲染就打开。 |
lightDismiss | boolean | MaybeRefOrGetter | false | 点击外部是否关闭浮层。 |
lazyMount | boolean | MaybeRefOrGetter | false | 是否等到第一次 show() 才渲染内容。渲染与否看 isMounted。 |
onShow | () => void | — | show() 打开浮层后调用。靠 isDefaultOpen 首次渲染就打开不算一次显示,不会调用它。 |
onHide | () => void | — | hide() 关闭浮层后调用。 |
返回值
| 字段 | 类型 | 说明 |
|---|---|---|
isOpen | ShallowRef<boolean> | 浮层当前是否打开。 |
anchorRef | Ref<HTMLElement | null> | context 模式的锚点元素,用 :ref 绑到触发器上;fixed 模式下不用设。 |
contentRef | Ref<HTMLElement | null> | 浮层容器。定位靠它量尺寸,点击外部也靠它判断。 |
contentStyle | ComputedRef<CSSProperties> | 内联坐标:context 模式是量出来的 top / left;fixed 模式是 position: fixed 加 x / y。 |
resolvedPlacement | ComputedRef<'above' | 'below' | 'start' | 'end'> | 考虑空间翻转之后实际生效的方位。fixed 模式下等于请求的方位。 |
isMounted | ComputedRef<boolean> | 内容是否该渲染。lazyMount 打开时,第一次 show() 之前一直是 false。 |
id | string | 浮层的唯一 ID,用于 aria-controls、aria-describedby 这类关系。 |
anchorId | string | 锚点的 CSS 标识,用于高级定位场景。 |
show | () => void | 打开浮层。 |
hide | () => void | 关闭浮层。 |