警报对话框

一个模态对话框，用于以重要内容中断用户并期望用户做出响应。

vue

<script setup lang="ts">
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'

function handleAction() {
  // eslint-disable-next-line no-alert
  alert('clicked action button!')
}
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger
      class="bg-white text-grass11 font-semibold hover:bg-white/90 shadow-sm inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] leading-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black transition-all"
    >
      Delete account
    </AlertDialogTrigger>
    <AlertDialogPortal>
      <AlertDialogOverlay class="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-30" />
      <AlertDialogContent
        class="z-[100] text-[15px] data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none"
      >
        <AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
          Are you absolutely sure?
        </AlertDialogTitle>
        <AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </AlertDialogDescription>
        <div class="flex justify-end gap-[25px]">
          <AlertDialogCancel
            class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
          >
            Cancel
          </AlertDialogCancel>
          <AlertDialogAction
            class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
            @click="handleAction"
          >
            Yes, delete account
          </AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

功能

自动捕获焦点。
可以是受控的或不受控的。
使用 Title 和 Description 组件管理屏幕阅读器公告。
Esc 会自动关闭组件。

安装

从命令行安装组件。

$ npm add radix-vue

解剖

导入所有部分并将它们拼凑在一起。

vue

<script setup lang="ts">
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger />
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <AlertDialogTitle />
        <AlertDialogDescription />
        <AlertDialogCancel />
        <AlertDialogAction />
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

API 参考

根

包含警报对话框的所有部分。

道具	默认	类型
`defaultOpen`		`布尔值` 对话框在初始渲染时的打开状态。如果您不需要控制其打开状态，请使用此属性。
`open`		`布尔值` 对话框的受控打开状态。可以绑定为 `v-model:open`。

发出	有效载荷
`update:open`	`[value: boolean]` 对话框的打开状态发生变化时调用的事件处理程序。

触发器

一个打开对话框的按钮。

道具	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。

数据属性	值
`[data-state]`	`"open" \| "closed"`

传送门

当使用时，将您的覆盖层和内容部分传送至 body 中。

道具	默认	类型
`disabled`		`布尔值` 禁用传送并内联渲染组件。 reference
`forceMount`		`布尔值` 用于在需要更多控制时强制安装。当使用 Vue 动画库控制动画时很有用。
`to`		`字符串 \| HTMLElement` Vue 原生传送组件属性 `:to` reference

覆盖层

当对话框打开时覆盖视图的非活动部分的层。

道具	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。
`forceMount`		`布尔值` 用于在需要更多控制时强制安装。当使用 Vue 动画库控制动画时很有用。

数据属性	值
`[data-state]`	`"open" \| "closed"`

内容

包含对话框打开时要渲染的内容。

道具	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。
`disableOutsidePointerEvents`		`布尔值` 当为 `true` 时，将禁用 `DismissableLayer` 外部元素上的悬停/聚焦/点击交互。用户需要在外部元素上点击两次才能与它们交互：一次关闭 `DismissableLayer`，另一次触发元素。
`forceMount`		`布尔值` 用于在需要更多控制时强制安装。当使用 Vue 动画库控制动画时很有用。
`trapFocus`		`布尔值` 当为 `true` 时，焦点无法通过键盘、指针或编程方式聚焦离开 `Content`。

发出	有效载荷
`closeAutoFocus`	`[event: Event]` 在关闭时自动聚焦时调用的事件处理程序。可以阻止。
`escapeKeyDown`	`[event: KeyboardEvent]` 按下 Escape 键时调用的事件处理程序。可以阻止。
`focusOutside`	`[event: FocusOutsideEvent]` 焦点移出 `DismissableLayer` 时调用的事件处理程序。可以阻止。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` 在 `DismissableLayer` 外部发生交互时调用的事件处理程序。具体来说，是指在外部发生 `pointerdown` 事件或焦点移出该事件时。可以阻止。
`openAutoFocus`	`[event: Event]` 在打开时自动聚焦时调用的事件处理程序。可以阻止。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` 在 `DismissableLayer` 外部发生 `pointerdown` 事件时调用的事件处理程序。可以阻止。

数据属性	值
`[data-state]`	`"open" \| "closed"`

取消

一个关闭对话框的按钮。此按钮应该在视觉上与 AlertDialogAction 按钮区分开来。

道具	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。

操作

一个关闭对话框的按钮。这些按钮应该在视觉上与 AlertDialogCancel 按钮区分开来。

道具	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。

标题

对话框打开时要宣布的无障碍名称。或者，您可以为 AlertDialogContent 提供 aria-label 或 aria-labelledby，并排除此组件。

道具	默认	类型
`as`	`'h2'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。

描述

对话框打开时要宣布的无障碍描述。或者，您可以为 AlertDialogContent 提供 aria-describedby，并排除此组件。

道具	默认	类型
`as`	`'p'`	`AsTag \| 组件` 此组件应呈现为的元素或组件。可以被 `asChild` 覆盖。
`asChild`		`布尔值` 将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。阅读我们的组合指南以了解更多详细信息。

示例

异步表单提交后关闭

使用受控属性在异步操作完成后以编程方式关闭警报对话框。

vue

<script setup>
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'

const wait = () => new Promise(resolve => setTimeout(resolve, 1000))
const open = ref(false)
</script>

<template>
  <AlertDialogRoot v-model:open="open">
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <form
          @submit.prevent="
            (event) => {
              wait().then(() => open = false);
            }
          "
        >
          <!-- some inputs -->
          <button type="submit">
            Submit
          </button>
        </form>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

自定义传送门容器

自定义警报对话框传送到的元素。

vue

<script setup>
import { ref } from 'vue'

const container = ref(null)
</script>

<template>
  <div>
    <AlertDialogRoot>
      <AlertDialogTrigger />
      <AlertDialogPortal :to="container">
        <AlertDialogOverlay />
        <AlertDialogContent>...</AlertDialogContent>
      </AlertDialogPortal>
    </AlertDialogRoot>

    <div ref="container" />
  </div>
</template>

无障碍性

符合警报和消息对话框 WAI-ARIA 设计模式。

键盘交互

键	描述
`空格`	打开/关闭对话框。
`Enter`	打开/关闭对话框。
`Tab`	将焦点移动到下一个可聚焦元素。
`Shift + Tab`	将焦点移动到上一个可聚焦元素。
`Esc`	关闭对话框并将焦点移到 `AlertDialogTrigger`。

警报对话框 ​

功能 ​

安装 ​

解剖 ​

API 参考 ​

根 ​

触发器 ​

传送门 ​

覆盖层 ​

内容 ​

取消 ​

操作 ​

标题 ​

描述 ​

示例 ​

异步表单提交后关闭 ​

自定义传送门容器 ​

无障碍性 ​

键盘交互 ​