抽屉 Drawer
触发命令后，从屏幕一侧滑出的抽屉式的面板。
安装
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 | - | - |