Dialog

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

CuiDialog

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

基础确认弹层

演示标题、正文和确认取消动作的基础组合

Live Demo

Preview

Code

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

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

<template>
    <DialogOverviewDemo />
</template>

核心 Props

确认弹层最常见配置

属性	类型	说明
`modelValue`	`boolean`	是否打开
`title`	`string`	标题
`confirmText`	`string`	确认按钮文案
`cancelText`	`string`	取消按钮文案
`loading`	`boolean`	是否展示确认加载状态

完整 Props

属性	类型	默认值	说明
`modelValue`	`boolean`	—	是否显示，支持 v-model（必填）
`title`	`string`	`'提示'`	对话框标题
`width`	`string \| number`	`'50%'`	对话框宽度
`showClose`	`boolean`	`true`	是否显示右上角关闭按钮
`closeOnClickModal`	`boolean`	`false`	点击遮罩层是否关闭
`beforeClose`	`(done: () => void) => void`	—	关闭前的回调，调用 done 才关闭
`showFooter`	`boolean`	`true`	是否显示底部按钮区
`confirmText`	`string`	`'确认'`	确认按钮文案
`cancelText`	`string`	`'取消'`	取消按钮文案
`confirmDisabled`	`boolean`	`false`	是否禁用确认按钮
`loading`	`boolean`	`false`	确认按钮是否显示加载状态

Emits

事件名	参数	说明
`update:modelValue`	`(value: boolean)`	显示状态更新
`confirm`	`()`	点击确认按钮
`cancel`	`()`	点击取消按钮
`open`	`()`	对话框打开后触发
`close`	`()`	对话框关闭后触发

Slots

插槽名	说明
`default`	对话框主体内容区
`footer-left`	底部栏左侧自定义内容
`footer-center`	底部按钮中间自定义内容