# DgDialog 对话框

> 基于 elementUi 封装集成度更高的弹窗组件，固定布局和按钮栏。

### 基础用法

::: demo 组件 Dialog 使用示例

```vue
<template>
  <el-button type="text" @click="drawer = true">点击打开 Dialog</el-button>
  <dg-dialog :title="drawerTitle" :visible.sync="drawer" :headerTip="drawerHeaderTip" @confirm="confirmFn">
    <div>中间内容</div>
  </dg-dialog>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      drawerTitle: '弹窗标题',
      drawer: false,
      drawerHeaderTip: {
        title: '顶部提示文字',
      },
    }
  },
  methods: {
    // 确定按钮调用方法
    confirmFn() {
      this.drawer = false
      console.log('点击确定按钮')
    },
  },
}
</script>
```

:::

`

## API （与 elementUi 完全一致的 dialog 属性，以下为特殊属性）

| 属性             | 说明                                 |   类型    | 默认值 | 可选值 |
| ---------------- | ------------------------------------ | :-------: | :----: | :----: |
| footerButtons    | 当传入值时，将覆盖内置确定，取消按钮 |  `Array`  |   -    |
| headerTip        | 顶部提示                             | `Object`  |   -    |
| showFooterButton | 是否需要底部按钮栏                   | `Boolean` |   -    |

## Events

| 事件名称 | 说明                           | 回调参数 |
| -------- | ------------------------------ | :------: |
| confirm  | 内置默认的确定按钮所调用的方法 |    -     |

## 更新日志

#### v1.0.0（2020-10-20）

- 初始版本