<template>
    <div>
        <!-- 触发弹出框显示的按钮 -->
        <el-button type="primary" @click="dialogFormVisible = true">打开表单</el-button>

        <!-- 弹出框 -->
        <el-dialog v-model="dialogFormVisible" title="表单标题" width="50%">
            <!-- 表单内容 -->
            <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" />
                </el-form-item>
            </el-form>

            <!-- 弹出框的底部按钮 -->
            <template #footer>
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveForm">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const dialogFormVisible = ref(false);  // 控制弹出框的显示和隐藏
    const form = ref({ name: '', email: '' });  // 表单数据
    const rules = {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    };

    const saveForm = () => {
        console.log('保存表单数据:', form.value);
        dialogFormVisible.value = false;  // 关闭弹出框
    };
</script>

<el-dialog v-model="dialogVisible" title="弹窗" top="10vh">
  <p>这里是弹窗内容</p>
</el-dialog>