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>