<template>
  <div>
    <el-button @click="showDialog = true">打开弹窗</el-button>

    <!-- 需要在模板中定义弹窗 -->
    <el-dialog
      v-model="showDialog"
      title="用户信息"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <UserForm :user="currentUser" @submit="handleSubmit" />
    </el-dialog>
  </div>
</template>

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

// 需要管理状态
const showDialog = ref(false);
const currentUser = ref(null);

// 需要多个事件处理函数
const handleConfirm = () => {
  showDialog.value = false;
};

const handleCancel = () => {
  showDialog.value = false;
};

const handleSubmit = (userData) => {
  // 处理提交逻辑
  showDialog.value = false;
};
</script>

<template>
  <div>
    <el-button @click="openUserDialog">打开弹窗</el-button>
  </div>
</template>

<script setup>
import { useDialog } from "@vue-cmd/element-plus";

const dialog = useDialog();

const openUserDialog = async () => {
  try {
    const userData = await dialog(<UserForm user={currentUser} />, {
      title: "用户信息",
    }).promise;
    // 直接获取结果，无需额外状态管理
    console.log("用户数据：", userData);
  } catch (error) {
    console.log("用户取消了操作");
  }
};
</script>