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

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

时间: 2024-09-25 15:15:57 浏览: 122

在Cube UI中，你可以使用`$createDialog`方法来创建一个表单弹窗，例如包含姓名和年龄两个输入框。以下是一个基本的步骤说明： 1. 首先，你需要在Vue实例上挂载`cube-ui`提供的`DialogService`服务，以便访问`$createDialog`函数： ```javascript import DialogService from 'cube-ui/dist/cube-ui.esm.js'; export default { setup() { const dialogService = useDialog(); return { dialogService }; }, //... } ``` 2. 创建一个点击事件，当用户点击确认按钮时获取表单数据： ```javascript 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>`组件创建输入框： ```html <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`回调以在关闭对话框时清理状态： ```javascript methods: { dialogClosed() { this.dialogService.$data = {}; // 清空数据，防止下次对话框打开时保留上次的数据 } } ```

阅读全文