# 快速开始

下面示例展示了组件与 Hook 的基本组合方式。

## 弹窗表单示例

```vue
<script lang="ts" setup>
import { reactive } from 'vue'
import { InitDialog } from 'element-plus-form-test'

class AddForm {
  id?: string
  name = ''
}

const modelData = reactive(new AddForm())
const dialogConfig = reactive({
  title: '',
  isShowDialog: false,
  isShowBtn: true,
  width: '60%'
})

const { showDialog, closeDialog, confirmDialog, formRef } = new InitDialog({
  addText: '新增',
  editText: '编辑',
  modelData,
  dialogConfig,
  AddFrom: AddForm,
  addOrEditTable: () => {
    console.log('submit')
  }
})
</script>
```

## 推荐阅读

- [Dialog 弹窗](/components/feedback/dialog)
- [InitDialog](/hooks/init-dialog)
- [InitTable](/hooks/init-table)