Alert Dialog 确认对话

用于确认对话场景的 MoriUI 组件。

导入

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from 'moriui'

示例

概览

确认操作的对话框。

<script setup lang="ts">
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button
  } from 'moriui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">
        显示对话框
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>确认执行此操作？</AlertDialogTitle>
        <AlertDialogDescription>此操作不可撤销。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction>继续</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

基础

默认确认对话框。

<script setup lang="ts">
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button
  } from 'moriui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">
        删除
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>确认删除？</AlertDialogTitle>
        <AlertDialogDescription>该操作无法撤销。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction>删除</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

破坏性

用于不可逆操作的确认。

<script setup lang="ts">
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button
  } from 'moriui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">
        删除项目
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>确认删除项目？</AlertDialogTitle>
        <AlertDialogDescription>该操作无法撤销，所有关联数据将被永久删除。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction as-child>
          <Button variant="destructive">
            删除
          </Button>
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

媒体

在对话框中展示图标或图片媒体。

<script setup lang="ts">
  import { AlertTriangle } from '@lucide/vue'
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button
  } from 'moriui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">
        删除账号
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogMedia><AlertTriangle class="size-6" /></AlertDialogMedia>
        <AlertDialogTitle>确认删除账号？</AlertDialogTitle>
        <AlertDialogDescription>此操作不可撤销，所有数据将被永久删除。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction>确认删除</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

小尺寸

sm 尺寸适配紧凑场景。

<script setup lang="ts">
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button
  } from 'moriui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline" size="sm">
        删除
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent size="sm">
      <AlertDialogHeader>
        <AlertDialogTitle>确认删除？</AlertDialogTitle>
        <AlertDialogDescription>该操作无法撤销。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction>删除</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

小尺寸媒体

小尺寸下的媒体布局。

<script setup lang="ts">
  import { AlertCircle } from '@lucide/vue'
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button
  } from 'moriui'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline" size="sm">
        删除账号
      </Button>
    </AlertDialogTrigger>
    <AlertDialogContent size="sm">
      <AlertDialogHeader>
        <AlertDialogMedia><AlertCircle class="size-5" /></AlertDialogMedia>
        <AlertDialogTitle>确认删除账号？</AlertDialogTitle>
        <AlertDialogDescription>此操作不可撤销。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction>确认删除</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

RTL

在 RTL 页面中保持自然的操作顺序。

<script setup lang="ts">
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button,
    DirectionProvider
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <AlertDialog>
      <AlertDialogTrigger as-child>
        <Button variant="outline">
          حذف
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>تأكيد الحذف؟</AlertDialogTitle>
          <AlertDialogDescription>لا يمكن التراجع عن هذا الإجراء.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>إلغاء</AlertDialogCancel>
          <AlertDialogAction>حذف</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </DirectionProvider>
</template>

使用说明

组合方式

AlertDialog 由 Trigger、Portal、Overlay、Content、Header、Media、Title、Description、Footer、Action 与 Cancel 组成。

尺寸

Content size 支持 default 与 sm，配合 Media 区域形成灵活布局。

RTL

对话框内容沿外围 dir 排列，Action 与 Cancel 位置会随逻辑方向调整。

变体

AlertDialogContent size 支持 default 与 sm。

可访问性

AlertDialog 复用 Reka UI Dialog 的焦点管理、Escape 关闭、遮罩交互和焦点归还。Content 内应提供 AlertDialogTitle，以及可选的 AlertDialogDescription 为屏幕阅读器提供上下文。

API 参考

属性	类型	默认值	说明
`AlertDialog v-model:open`	`boolean`	`undefined`	对话框的受控打开状态。
`AlertDialog defaultOpen`	`boolean`	`false`	非受控对话框的初始状态。
`AlertDialogContent size`	`'default' \| 'sm'`	`'default'`	对话框尺寸。
`AlertDialogContent class`	`HTMLAttributes["class"]`	`undefined`	合并到对话框内容的调用方类。
`AlertDialogHeader as / asChild`	`string \| Component / boolean`	`'div' / false`	页眉的元素组合能力。
`AlertDialogFooter as / asChild`	`string \| Component / boolean`	`'div' / false`	页脚的元素组合能力。
`AlertDialogMedia as / asChild`	`string \| Component / boolean`	`'div' / false`	媒体区域的元素组合能力。