Components

Dialog 对话框

模态弹层：遮罩模糊、焦点圈闭与 Esc 关闭，支持 header/footer 结构插槽。

表单弹层

trigger 插槽或受控 open 均可。

<Button variant="solid" color="primary" @click="open = true">打开对话框</Button>
<Dialog v-model:open="open" title="配置虚拟网络网段" description="更新当前 VPC 的 CIDR 规则，此操作将同步至边界安全网关。">
  <div class="space-y-3 py-1">
    <Input placeholder="10.0.0.0/16" label="目标 CIDR 网段" />
    <Banner color="warning" title="路由警告">变更可能导致活跃的持久长连接短暂重连。</Banner>
  </div>
  <template #footer>
    <Button variant="outline" color="neutral" @click="open = false">取消</Button>
    <Button variant="solid" color="primary" @click="open = false">确认应用</Button>
  </template>
</Dialog>

API 参考

属性	类型	默认值	说明
`open`	`boolean`	`false`	v-model:open 受控展开。
`title / description`	`string`	`—`	头部文案。
`trigger / header / footer`	`slot`	`—`	结构插槽。