Teleport 挂载容器
基于 BrConfigProvider 实现全局主题配置，支持 DOM 挂载隔离、层级管理、SSR 兼容的企业级 Teleport 组件，作为 BrDialog / BrModal 底层核心依赖。
组件特性
- 🧩 灵活挂载：支持挂载到 body、指定选择器或 HTMLElement，目标容器不存在时自动创建。
- 📚 层级管理：多实例堆叠时自动递增 z-index，也支持通过 BrConfigProvider 全局配置或指定固定层级。
- 🛡️ 样式与隔离：基于 TailwindCSS 实现，支持可选的样式隔离（Shadow DOM / isolation）。
- 🎬 动画过渡：内置多种挂载/卸载动画（Fade, Zoom, Slide 等），支持主题动画时长联动。
- 🖱️ 交互控制：内置基于挂载容器的滚动穿透控制和 Escape 键盘事件监听。
基础用法
最简单的用法是直接将内容挂载到 body。
Example
自定义容器挂载
可以将内容挂载到指定的节点，如果目标节点不存在，BrTeleport 会自动在 body 下创建它。
Container #demo-teleport-target
Example
多实例堆叠管理
BrTeleport 会自动管理多实例的 z-index，确保后打开的实例在最上层。同时按 ESC 键时，只会触发最上层实例的 escape-key-down 事件。
Example
与 BrDialog 集成
BrTeleport 作为底层组件，可以与 BrConfigProvider 和 BrDialog 等高级组件无缝集成，自动继承全局的主题配置。
Example
主题定制
BrTeleport 内部无缝集成了 BrConfigProvider，可以全局设置 z-index 基数和动画过渡时间。
Example
API
BrTeleport Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
to | string | HTMLElement | 'body' | 挂载目标，支持 CSS 选择器或 DOM 节点 |
disabled | boolean | false | 是否禁用 Teleport（禁用时就地渲染） |
autoCreate | boolean | true | 当 to 对应的节点不存在时，是否自动创建 |
isolation | boolean | false | 是否开启样式隔离（添加 isolation 类） |
zIndex | number | - | 固定的层级数值 |
zIndexStrategy | 'auto' | 'fixed' | 'config' | 'auto' | 层级策略，自动递增、固定值或读取全局配置 |
animation | 'fade' | 'zoom' | 'slide-up' | 'slide-down' | 'none' | 'fade' | 挂载/卸载过渡动画类型 |
animationDuration | string | - | 自定义动画时长（覆盖全局主题配置） |
lockScroll | boolean | false | 挂载时是否锁定 body 滚动 |
closeOnEscape | boolean | false | 开启后按 ESC 键可触发 escape-key-down 事件 |
lazy | boolean | false | 是否在挂载后才渲染内容 |
BrTeleport Emits
| 事件名 | 说明 | 回调参数 |
|---|---|---|
mount | 挂载完成时触发 | (container: HTMLElement) |
unmount | 卸载完成时触发 | - |
escape-key-down | 开启 closeOnEscape 且当前实例位于最顶层时，按 ESC 键触发 | (event: KeyboardEvent) |
TeleportManager API
如果需要手动管理层级，可以通过导出 TeleportManager 静态类操作：
| 方法 | 说明 |
|---|---|
getZIndex(id: string, customZIndex?: number) | 分配并返回一个新的层级 |
removeInstance(id: string) | 移除指定的挂载实例 |
getTopInstance() | 获取当前最高层级的实例 ID |