Admin 元件

Alert Dialog

高風險操作確認用的強制對話框；需明確回應後才能關閉。

安裝

Terminal

pnpm dlx shadcn-vue add @admin/alert-dialog

import {  AdminAlertDialog,  AdminAlertDialogAction,  AdminAlertDialogCancel,  AdminAlertDialogContent,  AdminAlertDialogDescription,  AdminAlertDialogFooter,  AdminAlertDialogHeader,  AdminAlertDialogTitle,  AdminAlertDialogTrigger,} from '@/components/admin/alert-dialog'

用法

<script setup lang="ts">import { cn } from '@/lib/utils'import {  AdminAlertDialog,  AdminAlertDialogAction,  AdminAlertDialogCancel,  AdminAlertDialogContent,  AdminAlertDialogDescription,  AdminAlertDialogFooter,  AdminAlertDialogHeader,  AdminAlertDialogTitle,  AdminAlertDialogTrigger} from '@/components/admin/alert-dialog'import { AdminButton } from '@/components/admin/button'</script><template>  <admin-alert-dialog>    <admin-alert-dialog-trigger as-child>      <admin-button>我是觸發按鈕</admin-button>    </admin-alert-dialog-trigger>    <admin-alert-dialog-content show-close-button>      <admin-alert-dialog-header>        <admin-alert-dialog-title>我是標題</admin-alert-dialog-title>        <admin-alert-dialog-description>          我是描述文字，用來向使用者說明這個操作會造成什麼後果。        </admin-alert-dialog-description>      </admin-alert-dialog-header>      <admin-alert-dialog-footer>        <admin-alert-dialog-cancel          :class="            cn(`              inline-flex h-[44px] items-center justify-center rounded-[8px] border              border-primary-50 px-3.75 py-2.75 typo-content-medium text-primary-50 transition-all              hover:bg-primary-60 hover:text-text-10            `)          "        >          取消        </admin-alert-dialog-cancel>        <admin-alert-dialog-action          :class="            cn(`              inline-flex h-[44px] items-center justify-center rounded-[8px] bg-secondary-50 px-3.75              py-2.75 typo-content-medium text-text-10 transition-all              hover:bg-secondary-60            `)          "        >          確認        </admin-alert-dialog-action>      </admin-alert-dialog-footer>    </admin-alert-dialog-content>  </admin-alert-dialog></template>

場景

以 overlay 命令式開啟

需要由 composable 驅動時，搭配 useOverlay()。

<script setup lang="ts">import { ref } from 'vue'import { AdminButton } from '@/components/admin/button'import { useOverlay } from '@/components/admin/overlay'import AlertDialogOverlayContent from './dialog/alert-dialog-overlay-content.vue'const overlay = useOverlay()const status = ref('我是狀態文字')const confirmDialog = overlay.create(AlertDialogOverlayContent, {  props: {    title: '我是標題',    description: '我是描述文字'  }})async function openAlertDialogOverlay() {  status.value = '等待使用者回應⋯'  const result = await confirmDialog.open()  status.value = result === 'confirmed' ? '使用者按下確認' : '使用者按下取消'}</script><template>  <div class="flex w-full max-w-md flex-col gap-4">    <admin-button class="self-start" @click="openAlertDialogOverlay"> 我是觸發按鈕 </admin-button>    <p class="text-sm text-text-60">{{ status }}</p>  </div></template>

API 參考

組成

<template>  <admin-alert-dialog v-model:open="isOpen">    <admin-alert-dialog-trigger>觸發</admin-alert-dialog-trigger>    <admin-alert-dialog-content>      <admin-alert-dialog-header>        <admin-alert-dialog-title>標題</admin-alert-dialog-title>        <admin-alert-dialog-description>說明文字</admin-alert-dialog-description>      </admin-alert-dialog-header>      <admin-alert-dialog-footer>        <admin-alert-dialog-cancel>取消</admin-alert-dialog-cancel>        <admin-alert-dialog-action>確認</admin-alert-dialog-action>      </admin-alert-dialog-footer>    </admin-alert-dialog-content>  </admin-alert-dialog></template>

admin-alert-dialog

Props

名稱	型別	預設值	說明
`open`	`boolean \| undefined`	—	The controlled open state of the dialog. Can be binded as `v-model:open`.
`defaultOpen`	`boolean \| undefined`	—	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
`unmountOnHide`	`boolean \| undefined`	`true`	When set to `false`, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open.
`class`	`unknown`	—	—

Events

名稱	Payload	說明
`update:open`	`boolean`	—

Slots

名稱	Bindings	說明
`default`	`{ open: boolean; close: () => void; }`	—

admin-alert-dialog-content

Props

名稱	型別	預設值	說明
`forceMount`	`boolean \| undefined`	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`disableOutsidePointerEvents`	`boolean \| undefined`	—	When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
`class`	`ClassValue`	—	根元素之自訂 class
`showCloseButton`	`boolean \| undefined`	`true`	設為 `false` 時隱藏右上角關閉 X 按鈕

Events

名稱	Payload	說明
`escapeKeyDown`	`KeyboardEvent`	—
`pointerDownOutside`	`PointerDownOutsideEvent`	—
`focusOutside`	`FocusOutsideEvent`	—
`interactOutside`	`PointerDownOutsideEvent \| FocusOutsideEvent`	—
`openAutoFocus`	`Event`	—
`closeAutoFocus`	`Event`	—

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-action

Props

名稱	型別	預設值	說明
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`class`	`ClassValue`	—	根元素之自訂 class

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-cancel

Props

名稱	型別	預設值	說明
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`class`	`unknown`	—	—

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-description

Props

名稱	型別	預設值	說明
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`class`	`ClassValue`	—	根元素之自訂 class

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-footer

Props

名稱	型別	預設值	說明
`class`	`ClassValue`	—	根元素之自訂 class

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-header

Props

名稱	型別	預設值	說明
`class`	`ClassValue`	—	根元素之自訂 class

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-title

Props

名稱	型別	預設值	說明
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`class`	`ClassValue`	—	根元素之自訂 class

Slots

名稱	Bindings	說明
`default`	`{}`	—

admin-alert-dialog-trigger

Props

名稱	型別	預設值	說明
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`class`	`unknown`	—	—

Slots

名稱	Bindings	說明
`default`	`{}`	—

更新紀錄

2026-07-07feat: 新增 admin-dialog-scroll-content 並統一 description token1d86dd8
2026-07-06fix: 修正 admin-alert-dialog-content 預設行為與屬性洩漏9602851

Audio Player

音訊播放器（vidstack）。播放、快進快退、音量、播放速度、時間顯示。