<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 CommandDialog = useDialog()

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