Overlay 浮层管理

何时使用

需要浮层层级管理或遮罩时。

OverlayProvider 统一管理应用内弹层（Modal/Dialog/Drawer 等）的 z-index 层级与显示状态。

已包裹 OverlayProvider，弹层层级已统一管理

基础用法

在应用根组件包裹一次 OverlayProvider：

<script setup lang="ts">
import { OverlayProvider } from "@reglow/reui";
</script>

<template>
  <OverlayProvider>
    <App />
  </OverlayProvider>
</template>

导入

import { OverlayProvider, useOverlayLayer } from "@reglow/reui";

更多示例

在自定义弹层中使用

使用 useOverlayLayer() composable 获取层级，在自定义弹层组件中管理 z-index。

import { useOverlayLayer } from "@reglow/reui";

const overlay = useOverlayLayer();

// 进入模态层（Dialog/Modal/Drawer 等）
const { overlay: overlayZ, content: contentZ } = overlay.enter();
// overlayZ -> 遮罩层 z-index
// contentZ -> 内容层 z-index（比遮罩 +1）

// 离开时释放
overlay.leave();

// flyout 类组件（Popover/DropdownMenu 等）
const flyoutZ = overlay.getFlyoutZIndex();

// 消息类组件（Toast/Notification 等）
const messageZ = overlay.getMessageZIndex();

API

OverlayProvider

无 props，在根组件包裹一次即可。通过 provide 注入层级管理上下文。

useOverlayLayer()

返回以下方法：

方法	说明	返回值
`enter()`	进入一个模态层，返回遮罩和内容的 z-index	`{ overlay: number, content: number }`
`leave()`	离开当前模态层，释放层级	`void`
`getFlyoutZIndex()`	获取 flyout 层级（Popover/Dropdown 等）	`number`
`getMessageZIndex()`	获取消息层级（Toast/Notification，始终置顶）	`number`

层级体系

层级	z-index 基准	用途
overlay-base	`1000`	模态遮罩基线
flyout	base + 2	浮层（Popover、DropdownMenu 等）
message	base + 9000	消息提示（Toast、Notification）

FloatButton 悬浮按钮

用于全局页面的快捷操作入口，如回到顶部、帮助、客服等。

Tour 漫游式引导

分步引导用户了解产品功能

内容锚点

何时使用
基础用法
导入
更多示例
- 在自定义弹层中使用
API