# UDrawer 抽屉
- [示例](#示例)
- [基本用法](#基本用法)
- [抽屉显示位置](#抽屉显示位置)
- [关闭展示首尾插槽](#关闭展示首尾插槽)
- [抽屉尺寸](#抽屉尺寸)
- [插槽空缺](#插槽空缺)
- [blocks效果测试](#blocks效果测试)
- [API]()
- [Props/Attrs](#propsattrs)
- [Events](#events)
- [Methods](#methods)
**Feedback**
抽屉
## 示例
### 基本用法
```vue
指南
概念
组件
Drawer
```
### 抽屉显示位置
```vue
Left
Right
Top
Bottom
```
### 关闭展示首尾插槽
```vue
内容
确定
取消
内容
确定
取消
hidden
show
```
### 抽屉尺寸
```vue
auto width/height
right
bottom
small
normal
large
auto
```
### 插槽空缺
```vue
empty
```
### blocks效果测试
```vue
内容
确定
取消
empty
```
## API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| placement | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'right'` | 抽屉弹出的位置 |
| show-head | boolean | | `true` | |
| show-foot | boolean | | `true` | |
| maskClosable | boolean | | `true` | 点击遮罩关闭抽屉 |
| visible.sync | boolean | | `false` | 显示状态分为“True(打开)/False(关闭)”，默认为“打开” |
| size | string | `[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 抽屉的尺寸 |
### Events
#### @open
打开抽屉时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| senderVM | UDrawer | 发送事件实例 |
#### @before-close
关闭抽屉前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| ok | boolean | 是否确定 |
| $event.preventDefault | Function | 阻止关闭流程 |
| senderVM | UDrawer | 发送事件实例 |
#### @close
关闭抽屉时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| ok | boolean | 是否确定 |
| senderVM | UDrawer | 发送事件实例 |
Methods
#### open()
打开抽屉
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
#### close()
关闭抽屉
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |