# CommonDialog 弹窗

### 基础用法

:::demo

```vue
<template>
  <div>
    <el-button type="primary" @click="handelClick">点击1弹窗</el-button>
    <common-dialog v-if="showDialog" title="我是弹窗组件" @close-dialog="closeDialog" @confirm-diaog="confirmDialog"></common-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
const showDialog = ref(false)


function handelClick() {
  showDialog.value = true
}

function closeDialog() {
  showDialog.value = false;
  ElMessage('关闭弹窗')
}

function confirmDialog() {
  showDialog.value = false;
  ElMessage('确认按钮')
}

</script>

```

:::


:::demo

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

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

const showCustomDialog = ref(false)


function handelClick() {
  showCustomDialog.value = true
}

function handelCancel() {
  showCustomDialog.value = false
}

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-dialog全部参数的导入； btns： 支持弹窗按钮自定义 |Object[]|false|
|fullscreen| 是否采用全屏弹窗 |Boolean|false|
|width| 弹窗宽度， 目前支持两种数据形式， ’big/middle/small/full/及数字自定义方式‘，其中big:960pxmiddle:'831px', small:'560px',如果直接传number数字时或者百分比时，支持按照百分比或者数字进行宽度的自定义调整, 默认为middle | String/Number | false |


### 事件

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

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