Dialog Form

CuiDialogForm 弹层表单组件

CuiDialogForm

CuiDialogForm 把 CuiDialog 和 CuiForm 组合成统一的弹层表单模型，适合新增、编辑和轻量审批。

弹层表单

演示在对话框内承载表单字段、提交和关闭动作

Live Demo

Preview

Code

先看效果，再决定是否展开代码细节。

<script setup lang="ts">
import DialogFormBasicDemo from "~/app/components/demo/DialogFormBasicDemo.vue";
</script>

<template>
    <DialogFormBasicDemo />
</template>

核心 Props

弹层表单常用配置

属性	类型	说明
`visible`	`boolean`	是否打开
`modelValue`	`Record<string, any>`	表单数据
`fields`	`CuiFormField[]`	字段配置
`confirmText`	`string`	确认按钮文案
`loading`	`boolean`	是否展示提交加载状态

完整 Props

属性	类型	默认值	说明
`visible`	`boolean`	—	是否显示，支持 `v-model:visible`（必填）
`modelValue`	`T`	—	表单数据，支持 v-model（必填）
`fields`	`CuiFormField<T>[]`	—	字段配置数组（必填）
`title`	`string`	`'表单对话框'`	对话框标题
`width`	`string \| number`	`'50%'`	对话框宽度
`showClose`	`boolean`	`true`	是否显示关闭按钮
`closeOnClickModal`	`boolean`	`false`	点击遮罩是否关闭
`labelWidth`	`string \| number`	`'100px'`	表单标签宽度
`inline`	`boolean`	`false`	是否行内布局
`disabled`	`boolean`	`false`	是否禁用表单
`labelPosition`	`'left' \| 'right' \| 'top'`	`'right'`	标签对齐方式
`confirmText`	`string`	`'确认'`	确认按钮文案
`cancelText`	`string`	`'取消'`	取消按钮文案
`confirmDisabled`	`boolean`	`false`	是否禁用确认按钮
`loading`	`boolean`	`false`	是否显示加载状态

Emits

事件名	参数	说明
`update:visible`	`(value: boolean)`	显示状态更新（注意：用 `update:visible` 而非 `update:modelValue`）
`update:modelValue`	`(value: T)`	表单数据更新
`submit`	`(value: T)`	验证通过后提交
`cancel`	`()`	点击取消
`open`	`()`	对话框打开
`close`	`()`	对话框关闭

Slots

插槽名	Scope	说明
`default`	—	表单上方的自定义内容区
`field-{prop}`（动态名）	`{ field, value, updateValue }`	自定义字段渲染，配合 field.slot 使用
`footer-center`	—	底部按钮中间自定义内容

Expose（ref 方法）

方法	说明
`resetForm()`	重置表单数据
`setFormData(data)`	设置表单数据

Dialog

`CuiDialog` 负责确认、提示和轻量补充信息场景，不应承载过长或过重的流程。

导航与布局

当页面信息密度和流程复杂度上升时，需要通过搜索面板和标签页组织交互，而不是继续堆叠普通内容块。

GitHub 提交 Issue