Dialog 对话框

基于 reka-ui 的组合式模态对话框

何时使用

需要模态对话框承载内容时。

导入

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogTrigger,
} from "@reglow/reui";

基础用法

模态对话框组件，基于 reka-ui Dialog 构建。适用于需要用户处理事务又不希望跳转页面的场景。

<script setup>
import { ref } from "vue";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogTrigger,
} from "@reglow/reui";
import { Button } from "@reglow/reui";

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

<template>
  <Dialog v-model:open="open">
    <DialogTrigger as-child>
      <Button>打开对话框</Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>对话框标题</DialogTitle>
        <DialogDescription>这是对话框描述内容</DialogDescription>
      </DialogHeader>
      <div class="py-4">
        <p>对话框内容</p>
      </div>
      <DialogFooter>
        <DialogClose as-child>
          <Button variant="outline">取消</Button>
        </DialogClose>
        <Button @click="open = false">确定</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

滚动内容

对于内容超长的对话框，使用 DialogScrollContent。

<script setup>
import { ref } from "vue";
import { Dialog, DialogScrollContent } from "@reglow/reui";
import { Button } from "@reglow/reui";

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

<template>
  <Dialog v-model:open="open">
    <DialogTrigger as-child>
      <Button>打开长内容对话框</Button>
    </DialogTrigger>
    <DialogScrollContent class="sm:max-w-[425px]">
      <div class="py-4 space-y-4">
        <!-- 大量内容 -->
      </div>
    </DialogScrollContent>
  </Dialog>
</template>

受控

通过 v-model:open 在外部控制对话框开关。

<script setup>
import { ref } from "vue";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@reglow/reui";
import { Button } from "@reglow/reui";

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

<template>
  <Button @click="open = true">打开</Button>
  <Dialog v-model:open="open">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>受控对话框</DialogTitle>
      </DialogHeader>
    </DialogContent>
  </Dialog>
</template>

API

Dialog Props

参数	说明	类型	默认值
open (v-model)	是否打开	`boolean`	-
defaultOpen	默认打开	`boolean`	-
modal	模态模式	`boolean`	`true`

DialogContent Props

参数	说明	类型	默认值
class	附加类名	`string`	-
showCloseButton	显示关闭按钮	`boolean`	`true`
draggable	可拖拽	`boolean`	`true`

导出组件

组件	说明
Dialog	根组件
DialogTrigger	触发器
DialogContent	内容容器
DialogScrollContent	可滚动内容
DialogHeader	头部
DialogFooter	底部
DialogTitle	标题
DialogDescription	描述
DialogClose	关闭按钮
DialogOverlay	遮罩

内容锚点

何时使用
导入
基础用法
- 滚动内容
- 受控
API