Dialog

覆盖在主窗口或另一个对话框窗口之上的窗体，使其下方内容变为非活动状态。

Component Source API Reference

安装 ​

pnpm dlx shadcn-vue@latest add dialog

使用方法 ​

vue
<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
</script>

<template>
  <Dialog>
    <DialogTrigger>
      编辑个人资料
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>编辑个人资料</DialogTitle>
        <DialogDescription>
          在此处更改您的个人资料。完成后点击保存。
        </DialogDescription>
      </DialogHeader>

      <DialogFooter>
        保存更改
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

示例 ​

自定义关闭按钮 ​

滚动主体 ​

滚动遮罩 ​

表单 ​

注意 ​

要从 Context Menu 或 Dropdown Menu 中激活 Dialog 组件，必须将 Context Menu 或 Dropdown Menu 组件包裹在 Dialog 组件内。更多信息，请参阅相关 issue 此处。

js
<Dialog>
  <ContextMenu>
    <ContextMenuTrigger>右键点击</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>打开</ContextMenuItem>
      <ContextMenuItem>下载</ContextMenuItem>
      <DialogTrigger asChild>
        <ContextMenuItem>
          <span>删除</span>
        </ContextMenuItem>
      </DialogTrigger>
    </ContextMenuContent>
  </ContextMenu>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>确定要执行此操作吗？</DialogTitle>
      <DialogDescription>
        此操作无法撤销。您确定要从我们的服务器上永久删除此文件吗？
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">确认</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
Edit this page on GitHub