# 抽屉 Drawer

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/drawer
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

触发命令后，从屏幕一侧滑出的抽屉式的面板。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：基础抽屉，点击触发按钮抽屉从右侧滑出，点击遮罩区关闭。
- **自定义位置**：自定义位置，点击触发按钮抽屉从相应的位置滑出。
- **自定义节点**：可以通过 `title` 属性和 `footer` 属性定制节点内容。当设置为 `null` 时，将不会渲染对应的dom节点。
- **抽屉表单**：在抽屉里使用表单。
- **多层抽屉**：在抽屉内打开新的抽屉。
- **信息预览抽屉**：需要快速预览对象概要时使用，点击遮罩区关闭。
- **挂载节点**：可以通过 `getPopupContainer` 指定抽屉挂载的父级节点。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API
### Drawer

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|autoFocus|是否默认聚焦第一个可聚焦元素，只在 `focusLock` 开启时生效。|boolean |`true`|2.13.0|
|closable|是否显示右上角关闭按钮|boolean |`true`|-|
|confirmLoading|确认按钮是否为加载中状态|boolean |`-`|-|
|escToExit|按 `ESC` 键关闭|boolean |`true`|2.10.0|
|focusLock|是否将焦点锁定在弹出框内。|boolean |`true`|2.13.0|
|mask|是否显示遮罩|boolean |`true`|-|
|maskClosable|点击蒙层是否可以关闭|boolean |`true`|-|
|mountOnEnter|是否在初次打开对话框时才渲染 dom。|boolean |`true`|-|
|unmountOnExit|是否在隐藏的时候销毁 DOM 结构|boolean |`-`|-|
|visible|是否显示弹出框|boolean |`-`|-|
|zIndex|设置抽屉的 zIndex|number |`-`|2.42.0|
|placement|抽屉的方向 `top` `right` `bottom` `left`|'top' \| 'right' \| 'bottom' \| 'left' |`right`|-|
|cancelText|取消按钮文案|ReactNode |`-`|-|
|closeIcon|自定义右上角关闭按钮|ReactNode |`-`|2.49.0|
|footer|自定义按钮确认和取消按钮，为 null 的话没有按钮组|ReactNode |`-`|-|
|okText|确认按钮文案|ReactNode |`-`|-|
|title|弹出框的标题（设置为 null 时，不显示标题栏）|ReactNode |`-`|-|
|bodyStyle|内容区域的样式|CSSProperties |`-`|2.9.0|
|cancelButtonProps|取消按钮的 props|ButtonProps |`-`|2.26.0|
|className|节点类名|string \| string[] |`-`|-|
|headerStyle|头部的样式|CSSProperties |`-`|2.9.0|
|height|抽屉的高度，`placement`为 `top` `bottom` 时生效|string \| number |`250`|-|
|maskStyle|设置遮罩层的样式|CSSProperties |`-`|-|
|okButtonProps|确认按钮的 props|ButtonProps |`-`|2.26.0|
|style|节点样式|CSSProperties |`-`|-|
|width|抽屉的宽度，`placement`为 `left` `right` 时生效|string \| number |`250`|-|
|wrapClassName|设置外层容器的类名|string \| string[] |`-`|-|
|afterClose|抽屉关闭之后的回调|() => void |`-`|-|
|afterOpen|抽屉打开之后的回调|() => void |`-`|-|
|getChildrenPopupContainer|抽屉里的弹出框 `Select` `Tooltip` 等挂载的容器，默认挂载在对话框内。|(node: HTMLElement) => Element |`-`|-|
|getPopupContainer|指定弹出框挂载的父节点|() => Element |`() => document.body`|-|
|onCancel|关闭弹出框的回调|(e: MouseEvent \| Event) => void |`-`|-|
|onOk|点击确认按钮的回调|(e: Event) => void |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt