<template>
<div class="dialog-demo">
<div class="dialog-demo__actions">
<el-button type="primary" @click="open()">弹窗表单</el-button>
<el-button @click="open('drawer')">抽屉表单</el-button>
<el-button @click="open('dialog', { name: '张三', age: 28 })">带数据表单</el-button>
</div>
<p aria-live="polite">{{ message }}</p>
<pre>{{ result }}</pre>
</div>
</template>
<script setup>
import { getCurrentInstance, onBeforeUnmount, ref } from 'vue'
import { $DialogForm } from '@smallwei/avue'
const { appContext } = getCurrentInstance()
const showDialog = $DialogForm(appContext)
const result = ref('提交后显示保存结果')
const message = ref('请选择一种打开方式')
let dialog
const option = {
submitText: '保存', span: 24,
column: [
{ label: '姓名', prop: 'name', rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }] },
{ label: '年龄', prop: 'age', type: 'number', min: 0, max: 120 }
]
}
function open(type = 'dialog', data = { name: '', age: 18 }) {
dialog?.close()
dialog = showDialog({
title: '人员登记', width: 'min(520px, 92vw)', type, data: { ...data }, option,
beforeClose(close) { message.value = '表单已关闭'; close() },
callback({ data, done, close }) {
result.value = JSON.stringify(data, null, 2)
done()
close()
dialog = undefined
}
})
message.value = '表单已打开'
}
onBeforeUnmount(() => dialog?.close())
</script>
<style scoped>
.dialog-demo__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dialog-demo__actions .el-button { margin-left: 0; }
pre { padding: 16px; overflow: auto; background: var(--el-fill-color-light); border-radius: 8px; font-size: 13px; line-height: 1.6; }
</style>
