# Popup

基础弹出组件，提供 Portal 能力，将子节点渲染到 DOM 树的指定位置。作为底层组件可扩展为弹窗 Modal、弹层 Popper、Toast 容器等。

## 适用场景

- 需要将内容渲染到 document.body 或指定容器的场景
- 作为 Modal、Popper、Toast 等上层组件的底层实现
- 需要脱离当前 DOM 层级以避免 overflow/z-index 问题的场景

## Props

### Popup Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| visible | `boolean` | `false` | 否 | 是否显示 |
| destroyOnHide | `boolean` | `true` | 否 | 是否在隐藏时销毁 |
| disablePortal | `boolean` | `false` | 否 | 禁用 portal，维持一般的 children in parent DOM 层级 |
| portalContainer | `HTMLElement \| (() => HTMLElement)` | - | 否 | 指定 portal 挂载的容器，不提供时默认为 document.body |

## 典型用法

### 基础用法

```tsx
import { Popup } from '@befe/brick'

<Popup visible={isOpen}>
    <div>弹出内容将渲染到 document.body</div>
</Popup>
```

### 指定挂载容器

```tsx
<Popup visible={isOpen} portalContainer={() => document.getElementById('container')!}>
    <div>渲染到指定容器</div>
</Popup>
```

### 禁用 Portal

```tsx
// 内容保持在当前 DOM 层级，不通过 portal 渲染
<Popup visible={isOpen} disablePortal>
    <div>不使用 portal</div>
</Popup>
```

## 注意事项

- 不支持 `props.style`，组件原则上不支持内联样式
- `destroyOnHide` 默认为 true，隐藏后 DOM 节点会被销毁；设为 false 可保留 DOM，提升再次显示时的性能