警告对话框

一种模态对话框，通过重要内容中断用户操作并期待响应。

Component Source API Reference

安装方法 ​

pnpm dlx shadcn-vue@latest add alert-dialog

使用方法 ​

vue
<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger>打开</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>确定要执行此操作吗？</AlertDialogTitle>
        <AlertDialogDescription>
          此操作不可逆转。这将永久删除您的账户并从我们的服务器上移除相关数据。
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction>继续</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>
Edit this page on GitHub