KDialog

示例

选择尺寸打开对话框

Modal dialog with composable sub-components. Renders via Teleport to the document body. Supports Escape key and overlay click to close.

Sub-Components

• KDialog — Root dialog container (manages open/close state)
• KDialogContent — Centered modal content panel
• KDialogOverlay — Semi-transparent backdrop overlay rendered automatically by KDialog
• KDialogHeader — Header section with vertical gap layout
• KDialogTitle — Dialog title (<h2> element)
• KDialogDescription | Muted description text
• KDialogFooter | Footer with action buttons

Props (KDialog)

Name	Type	Default	Description
open	boolean	false	Whether the dialog is visible.
showCloseButton	boolean	false	Whether to show a close button in the top-right corner.
size	'sm' | 'md' | 'lg'	'md'	Maximum width of the content panel.

Emits

Name	Parameters	Description
update:open	(value: boolean)	Emitted when the dialog open state changes (Escape key, overlay click, or close button).

Slots

Name	Description
default	Dialog content. Use sub-components for structured layouts.

Basic Usage

<script setup> import { ref } from 'vue' import { KDialog, KDialogContent, KDialogHeader, KDialogTitle, KDialogDescription, KDialogFooter, } from '@kK-2004/ui-component' const open = ref(false) </script> <template> <KButton @click="open = true">Open Dialog</KButton> <KDialog v-model:open="open" :show-close-button="true"> <KDialogContent> <KDialogHeader> <KDialogTitle>Confirm Action</KDialogTitle> <KDialogDescription>Are you sure you want to proceed?</KDialogDescription> </KDialogHeader> <KDialogFooter> <KButton variant="outline" @click="open = false">Cancel</KButton> <KButton @click="open = false">Confirm</KButton> </KDialogFooter> </KDialogContent> </KDialog> </template>