cube-ui 用 $createDialog 弹窗有两个输入框 姓名 年龄 点击确认可以拿到填写的内容

在Cube UI中，你可以使用`$createDialog`方法来创建一个表单弹窗，例如包含姓名和年龄两个输入框。以下是一个基本的步骤说明：

1. 首先，你需要在Vue实例上挂载`cube-ui`提供的`DialogService`服务，以便访问`$createDialog`函数：

import DialogService from 'cube-ui/dist/cube-ui.esm.js';

export default {
  setup() {
    const dialogService = useDialog();
    return { dialogService };
  },
  //...
}

2. 创建一个点击事件，当用户点击确认按钮时获取表单数据：

methods: {
  handleSubmit() {
    const formData = {
      name: this.dialogService.$data.name.value, // 获取姓名输入框的值
      age: this.dialogService.$data.age.value,   // 获取年龄输入框的值
    };

    if (formData.name && formData.age) { // 检查是否都已填写
      // 执行保存操作，如发送到API或其他逻辑处理
      console.log('Received data:', formData);
      this.dialogService.close(); // 关闭弹窗
    } else {
      alert('所有字段都需要填写');
    }
  }
},

3. 在HTML模板中使用`<cube-input>`组件创建输入框：

<template>
  <div>
    <button @click="handleSubmit">确认</button>
    <c-form-dialog ref="myDialog" title="个人信息" @close="dialogClosed">
      <cube-input label="姓名" v-model="dialogService.$data.name" />
      <cube-input type="number" label="年龄" v-model="dialogService.$data.age" />
    </c-form-dialog>
  </div>
</template>

4. 添加`dialogClosed`回调以在关闭对话框时清理状态：

methods: {
  dialogClosed() {
    this.dialogService.$data = {}; // 清空数据，防止下次对话框打开时保留上次的数据
  }
}