# drawer (w-drawer)

- **Import**: `WDrawer` from `win-design-next`
- **Tag**: `<w-drawer>`
- **说明**: Drawer 抽屉
- **分类**: feedback
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/drawer.md`

## API

## API

### 属性

| 属性名                     | 说明                                                                                                                       | 类型                                                                                                                                                     | 默认值 |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| model-value / v-model      | 是否显示 Drawer                                                                                                            | ^[boolean]                                                                                                                                               | false  |
| append-to-body             | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 **true**                                           | ^[boolean]                                                                                                                                               | false  |
| append-to                  | 挂载到哪个 DOM 元素 将覆盖 `append-to-body`                                                                                | ^[string]                                                                                                                                                | body   |
| lock-scroll                | 是否在 Drawer 出现时将 body 滚动锁定                                                                                       | ^[boolean]                                                                                                                                               | true   |
| before-close               | 关闭前的回调，会暂停 Drawer 的关闭                                                                                         | ^[Function]`(done: (cancel?: boolean) => void) => void(done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭)` | —      |
| close-on-click-modal       | 是否可以通过点击 modal 关闭 Drawer                                                                                         | ^[boolean]                                                                                                                                               | true   |
| close-on-press-escape      | 是否可以通过按下 ESC 关闭 Drawer                                                                                           | ^[boolean]                                                                                                                                               | true   |
| open-delay                 | Drawer 打开的延时时间，单位毫秒                                                                                            | ^[number]                                                                                                                                                | 0      |
| close-delay                | Drawer 关闭的延时时间，单位毫秒                                                                                            | ^[number]                                                                                                                                                | 0      |
| destroy-on-close           | 控制是否在关闭 Drawer 之后将子元素全部销毁                                                                                 | ^[boolean]                                                                                                                                               | false  |
| modal                      | 是否需要遮罩层                                                                                                             | ^[boolean]                                                                                                                                               | true   |
| direction                  | Drawer 打开的方向                                                                                                          | ^[enum]`'rtl' \| 'ltr' \| 'ttb' \| 'btt'`                                                                                                                | rtl    |
| show-close                 | 是否显示关闭按钮                                                                                                           | ^[boolean]                                                                                                                                               | true   |
| size                       | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | ^[number] / ^[string]                                                                                                                                    | 30%    |
| title                      | Drawer 的标题，也可通过具名 slot （见下表）传入                                                                            | ^[string]                                                                                                                                                | —      |
| with-header                | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效                             | ^[boolean]                                                                                                                                               | true   |
| modal-class                | 遮罩层的自定义类名                                                                                                         | ^[string]                                                                                                                                                | —      |
| header-class               | header 部分的自定义 class 名                                                                                               | ^[string]                                                                                                                                                | —      |
| body-class                 | body 部分的自定义 class 名                                                                                                 | ^[string]                                                                                                                                                | —      |
| footer-class               | footer 部分的自定义 class 名                                                                                               | ^[string]                                                                                                                                                | —      |
| z-index                    | 设置 z-index                                                                                                               | ^[number]                                                                                                                                                | —      |
| header-aria-level ^(a11y)  | header 的 `aria-level` 属性                                                                                                | ^[string]                                                                                                                                                | 2      |
| custom-class ^(deprecated) | Drawer 的自定义类名                                                                                                        | ^[string]                                                                                                                                                | —      |

### 事件

| 事件名称         | 说明                               | 类型                    |
| ---------------- | ---------------------------------- | ----------------------- |
| open             | Drawer 打开的回调                  | ^[Function]`() => void` |
| opened           | Drawer 打开动画结束时的回调        | ^[Function]`() => void` |
| close            | Drawer 关闭的回调                  | ^[Function]`() => void` |
| closed           | Drawer 关闭动画结束时的回调        | ^[Function]`() => void` |
| open-auto-focus  | 输入焦点聚焦在 Drawer 内容时的回调 | ^[Function]`() => void` |
| close-auto-focus | 输入焦点从 Drawer 内容失焦时的回调 | ^[Function]`() => void` |

### 插槽

| 名称                | 说明                                                    |
| ------------------- | ------------------------------------------------------- |
| default             | Drawer 的内容                                           |
| header              | Drawer 标题的内容；会替换标题部分，但不会移除关闭按钮。 |
| footer              | Drawer 页脚部分                                         |
| title ^(deprecated) | 与 header 作用相同 请使用 header                        |

### 暴露

| 名称        | 详情                                                    |
| ----------- | ------------------------------------------------------- |
| handleClose | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |
