AlertDialog 警告对话框

强制用户确认的模态对话框

何时使用

  • 需要用户强制确认的警告对话框时。
  • 操作具有破坏性、需要二次确认时。

导入

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@reglow/reui";

基础用法

警告对话框用于强制用户在继续操作前进行确认。与普通 Dialog 不同，AlertDialog 不会响应 ESC 键和遮罩点击关闭，用户必须明确点击「确认」或「取消」。

<script setup>
import { ref } from "vue";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@reglow/reui";
import { Button } from "@reglow/reui";

const open = ref(false);
</script>

<template>
  <Button variant="destructive" @click="open = true">删除</Button>

  <AlertDialog v-model:open="open">
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>确定删除？</AlertDialogTitle>
        <AlertDialogDescription>
          此操作不可恢复，确定要删除这条数据吗？
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel @click="open = false">取消</AlertDialogCancel>
        <AlertDialogAction @click="open = false">确认删除</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

受控用法

通过 v-model:open 在外部控制打开状态。

<script setup>
import { ref } from "vue";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@reglow/reui";
import { Button } from "@reglow/reui";

const open = ref(false);
</script>

<template>
  <Button @click="open = true">打开</Button>
  <AlertDialog v-model:open="open">
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>受控对话框</AlertDialogTitle>
        <AlertDialogDescription>通过外部状态控制开关。</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>取消</AlertDialogCancel>
        <AlertDialogAction @click="open = false">确定</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

API

AlertDialog Props

参数说明类型默认值
open (v-model)是否打开boolean-

AlertDialogContent Props

参数说明类型默认值
class附加类名string-

导出组件

组件说明
AlertDialog根组件
AlertDialogContent内容容器
AlertDialogHeader头部
AlertDialogFooter底部
AlertDialogTitle标题
AlertDialogDescription描述
AlertDialogAction确认按钮（需手动 @click="open = false" 关闭）
AlertDialogCancel取消按钮（需手动 @click="open = false" 关闭）
Alert 警告提示
Alert 警告提示
Dialog 对话框
基于 reka-ui 的组合式模态对话框