# CommonDrawer 抽屉

### 基础用法
*****

:::demo

```vue
<template>
  <div>
    <el-button type="primary" @click="handelClick">点击1抽屉</el-button>
    <common-drawer v-if="showDialog" title="我是抽屉组件"></common-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showDialog = ref(false)


function handelClick() {
  showDialog.value = true
}

</script>

```

:::


:::demo

```vue
<!-- 自定义抽屉按钮 -->
<template>
  <div>
    <el-button @click.stop="handelClick">自定义抽屉</el-button>
    <common-drawer
      v-if="showCustomDialog"
      title="自定义抽屉"
      :drawer-data="dialogData"
      @close-drawer="handelCancel"
    ></common-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showCustomDialog = ref(false)


function handelClick() {
  showCustomDialog.value = true
}

function handelCancel() {
  showCustomDialog.value = true
}

function handelClose() {
  showCustomDialog.value = false
}

function handelConfirm () {
  showCustomDialog.value = false
}
const dialogData = ref({
  btns: [
    { label: '取消', name: 'cancel', onClick: handelCancel },
    { label: '关闭', type: 'danger', name: 'close', onClick: handelClose },
    { label: '确认', type: 'promary', name: 'confirm', onClick: handelConfirm }
  ]
});

</script>

```

:::



### 配置参数
****


| 参数   | 说明       | 类型     | 是否必须 |
| :--------| :-------- | :--------------- | :------- |
|dialogData| drawerData： 支持element-plus中el-drawer全部参数的导入； btns： 支持抽屉按钮自定义 |Object[]|false|
|fullscreen| 是否采用全屏抽屉 |Boolean|false|
|width| 抽屉宽度， 目前支持两种数据形式， ’数字自定义方式‘，如果直接传number数字时或者百分比时，支持按照百分比或者数字进行宽度的自定义调整, 默认900px | String/Number | false |

*****
### 事件


### 事件

| 事件名称   | 说明       | 回调     |
| :--------| :-------- | :--------------- | 
| handleClose |  触发el-dialog的before-close钩子，确保点击右上角×后下次依然可以打开弹窗，必须调用 | -- |
| closeDialog |  点击取消时，触发的回调事件 | -- |
| confirmDialog | 点击确认按钮时，触发的回调事件 | -- |

```
如果为自定义按钮时，回调事件将按照自定义按钮的onClick函数进行执行回调，
同时需要调用handleClose事件去做弹窗的关闭动作，否则弹窗被关闭后将无法在打开；
```