BreezeUI
  • 简体中文

    • Alert Dialog 警告对话框

    一个中断用户操作的模态对话框，用于展示重要内容并等待用户响应。

    组件特性

    • 🛑 强制中断：强制用户在继续操作前做出决定。
    • ⌨️ 键盘支持：完整的键盘导航，包括使用 Escape 键关闭（如允许）以及焦点锁定（Tab trapping）。
    • 🎨 高度定制：易于定制不同意图的样式和颜色（例如：危险/破坏性操作）。
    • ♿ 无障碍支持：遵循 WAI-ARIA 规范。

    基础用法

    最基础的警告对话框展示。

    <script setup lang="ts">
import { 
  BrAlertDialog, 
  BrAlertDialogTrigger, 
  BrAlertDialogContent, 
  BrAlertDialogHeader, 
  BrAlertDialogTitle, 
  BrAlertDialogDescription, 
  BrAlertDialogFooter, 
  BrAlertDialogAction, 
  BrAlertDialogCancel, 
  BrButton 
} from '@breezeui/vue'
</script>

<template>
  <BrAlertDialog>
    <BrAlertDialogTrigger as-child>
      <BrButton outline>Show Dialog</BrButton>
    </BrAlertDialogTrigger>
    <BrAlertDialogContent>
      <BrAlertDialogHeader>
        <BrAlertDialogTitle>Are you absolutely sure?</BrAlertDialogTitle>
        <BrAlertDialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </BrAlertDialogDescription>
      </BrAlertDialogHeader>
      <BrAlertDialogFooter>
        <BrAlertDialogCancel>Cancel</BrAlertDialogCancel>
        <BrAlertDialogAction>Continue</BrAlertDialogAction>
      </BrAlertDialogFooter>
    </BrAlertDialogContent>
  </BrAlertDialog>
</template>

    自定义操作按钮颜色

    你可以根据对话框的意图自定义操作按钮的颜色，例如为破坏性操作使用 color="danger"。

    <script setup lang="ts">
import { 
  BrAlertDialog, 
  BrAlertDialogTrigger, 
  BrAlertDialogContent, 
  BrAlertDialogHeader, 
  BrAlertDialogTitle, 
  BrAlertDialogDescription, 
  BrAlertDialogFooter, 
  BrAlertDialogAction, 
  BrAlertDialogCancel, 
  BrButton 
} from '@breezeui/vue'
</script>

<template>
  <BrAlertDialog>
    <BrAlertDialogTrigger as-child>
      <BrButton color="danger" variant="soft">Delete Account</BrButton>
    </BrAlertDialogTrigger>
    <BrAlertDialogContent>
      <BrAlertDialogHeader>
        <BrAlertDialogTitle>Delete Account</BrAlertDialogTitle>
        <BrAlertDialogDescription>
          Are you sure you want to delete your account? All of your data will be permanently removed.
          This action cannot be undone.
        </BrAlertDialogDescription>
      </BrAlertDialogHeader>
      <BrAlertDialogFooter>
        <BrAlertDialogCancel>Cancel</BrAlertDialogCancel>
        <BrAlertDialogAction color="danger">Delete</BrAlertDialogAction>
      </BrAlertDialogFooter>
    </BrAlertDialogContent>
  </BrAlertDialog>
</template>

    异步加载与阻止外部关闭

    当你需要执行异步提交（例如删除/支付/解绑等）时，通常希望在提交中：

    • 操作按钮显示 loading 并禁用重复点击
    • 阻止点击遮罩层（外部区域）或按 ESC 关闭，避免中断流程
    <script setup lang="ts">
import { ref } from 'vue'
import {
  BrAlertDialog,
  BrAlertDialogAction,
  BrAlertDialogCancel,
  BrAlertDialogContent,
  BrAlertDialogDescription,
  BrAlertDialogFooter,
  BrAlertDialogHeader,
  BrAlertDialogTitle,
  BrAlertDialogTrigger,
  BrButton,
} from '@breezeui/vue'

const SUBMIT_DELAY_MS = 1200

const open = ref(false)
const submitting = ref(false)

const sleep = (ms: number) =>
  new Promise<void>((resolve) => {
    setTimeout(resolve, ms)
  })

const handleUpdateOpen = (nextOpen: boolean) => {
  if (submitting.value && nextOpen === false) {
    return
  }
  open.value = nextOpen
}

const handleEscapeKeyDown = (e: KeyboardEvent) => {
  if (!submitting.value) {
    return
  }
  e.preventDefault()
}

const handleConfirm = async () => {
  if (submitting.value) {
    return
  }

  submitting.value = true
  try {
    await sleep(SUBMIT_DELAY_MS)
    open.value = false
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <BrAlertDialog :open="open" @update:open="handleUpdateOpen">
    <BrAlertDialogTrigger as-child>
      <BrButton color="danger" variant="soft">Delete Account</BrButton>
    </BrAlertDialogTrigger>

    <BrAlertDialogContent
      :prevent-outside-close="submitting"
      @escape-key-down="handleEscapeKeyDown"
    >
      <BrAlertDialogHeader>
        <BrAlertDialogTitle>Delete Account</BrAlertDialogTitle>
        <BrAlertDialogDescription>
          This action cannot be undone. While submitting, outside click and ESC closing are blocked.
        </BrAlertDialogDescription>
      </BrAlertDialogHeader>

      <BrAlertDialogFooter>
        <BrAlertDialogCancel :disabled="submitting">Cancel</BrAlertDialogCancel>
        <BrAlertDialogAction
          color="danger"
          :loading="submitting"
          :disabled="submitting"
          @click="handleConfirm"
        >
          Confirm Delete
        </BrAlertDialogAction>
      </BrAlertDialogFooter>
    </BrAlertDialogContent>
  </BrAlertDialog>
</template>

    API 说明

    BrAlertDialog

    属性类型默认值说明
    defaultOpenbooleanfalse初始渲染时的默认展开状态。当你不需要控制其展开状态时使用。
    open (v-model)boolean-控制对话框的展开状态。

    BrAlertDialogTrigger

    用于包裹触发警告对话框的元素。

    属性类型默认值说明
    asChildbooleanfalse是否将其渲染为子元素，并将属性和行为合并到该子元素上。

    BrAlertDialogContent

    属性类型默认值说明
    classany-自定义类名
    hideOverlaybooleanfalse是否隐藏背景遮罩层
    preventOutsideClosebooleanfalse是否阻止点击外部时关闭对话框

    BrAlertDialogHeader / BrAlertDialogFooter

    头部（标题/描述）和底部（操作/取消按钮）的容器。

    BrAlertDialogTitle

    属性类型默认值说明
    asChildbooleanfalse是否将其渲染为子元素。
    classany-自定义类名

    BrAlertDialogDescription

    属性类型默认值说明
    asChildbooleanfalse是否将其渲染为子元素。
    classany-自定义类名

    BrAlertDialogAction

    属性类型默认值说明
    classany-自定义类名
    variant'solid' | 'outline' | 'dashed' | 'soft' | 'ghost' | 'link' | 'plain' | 'pure''solid'按钮的变体样式
    color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger''primary'按钮的颜色
    disabledbooleanfalse是否禁用操作按钮
    loadingbooleanfalse操作按钮是否处于加载中状态

    BrAlertDialogCancel

    属性类型默认值说明
    classany-自定义类名
    variant'solid' | 'outline' | 'dashed' | 'soft' | 'ghost' | 'link' | 'plain' | 'pure''outline'按钮的变体样式
    color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger''default'按钮的颜色
    disabledbooleanfalse是否禁用取消按钮