Result 结果
用于向用户反馈操作结果（如操作成功、系统警告、交易失败等状态）。组件配有强对比的正方形硬边框图标底盘，醒目的标题与内容，以及操作区插槽。
预览
成功状态 (Success)
支付成功
您的订单已支付完成，我们将在 24 小时内为您安排发货。您可以点击下方按钮查看物流详情。
错误状态 (Error)
提交失败
请检查您的表单输入，当前表单中包含冲突或格式不正确的配置。您可以修改后重新尝试。
警告与提示状态 (Warning / Info)
账户权限异常
检测到您的账户有安全隐患，请及时修改密码。
系统维护通知
本周六凌晨 2:00 - 4:00 系统将进行数据库维护。
安装
pnpm dlx brutx-vue@latest add result用法
基础成功状态
展示成功的操作回执。
<script setup>
import { Result } from 'brutx-ui-vue'
</script>
<template>
<Result
status="success"
title="付款成功"
sub-title="我们已经收到您的款项，将于2小时内配货出库。"
/>
</template>带有底部操作按钮
利用默认或 #extra 插槽，添加跳转或重新提交的操作按钮。
<template>
<Result
status="error"
title="网络连接失败"
sub-title="由于网关解析超时，数据未能成功上报，请修改后点击重试。"
>
<template #extra>
<button class="btn btn-primary" @click="retry">立即重试</button>
</template>
</Result>
</template>空状态
Result 支持 status="empty"，可作为空状态的推荐入口。
<template>
<Result
status="empty"
title="暂无数据"
sub-title="创建第一条记录后，这里会显示你的内容。"
/>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
status | "success" | "warning" | "info" | "error" | "empty" | undefined | "info" | 选择结果图标和配色状态；支持 success、warning、info、error、empty，运行时未知值回退为 info。 |
详情声明类型"success" | "warning" | "info" | "error" | "empty" | undefined 字面量
默认值详情
来源packages/ui/src/components/result/Result.vue | |||
title | string | undefined | undefined | 结果标题文本；可由 title 插槽替换。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/result/Result.vue | |||
subTitle | string | undefined | undefined | 结果副标题或补充说明；可由 subTitle 插槽替换。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/result/Result.vue | |||
variant | "card" | "plain" | undefined | "card" | 选择带边框和硬投影的 card 布局，或无卡片外观的 plain 布局。 |
详情声明类型"card" | "plain" | undefined 字面量
默认值详情
来源packages/ui/src/components/result/Result.vue | |||
iconSize | IconSize | undefined | undefined | 设置状态图标尺寸；未指定时使用组件内置的 40px 图标尺寸。 |
详情声明类型IconSize | undefined 字面量
关联类型 IconSize 类型定义 — IconSizeexport type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> 默认值详情
来源packages/ui/src/components/result/Result.vue | |||
titleAs | "h2" | "h3" | undefined | "h2" | 选择标题使用 h2 或 h3 语义元素。 |
详情声明类型"h2" | "h3" | undefined 字面量
默认值详情
来源packages/ui/src/components/result/Result.vue | |||
class | string | undefined | undefined | 追加到结果根容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/result/Result.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#icon | {} | 替换默认状态图标及其图标盒；该图标装饰区域对辅助技术隐藏。 |
详情声明类型{}来源packages/ui/src/components/result/Result.vue | ||
#title | {} | 替换结果标题内容结构。 |
详情声明类型{}来源packages/ui/src/components/result/Result.vue | ||
#subTitle | {} | 替换结果副标题内容结构。 |
详情声明类型{}来源packages/ui/src/components/result/Result.vue | ||
#extra | {} | 在标题和副标题下方呈现额外操作或补充内容。 |
详情声明类型{}来源packages/ui/src/components/result/Result.vue | ||
可访问性
- 语义结构：标题通过
titleAs（h2/h3）指定层级，作为结果区的语义标题；副标题用<p>呈现描述文本。 - 装饰图标：状态图标用
aria-hidden标记为装饰性内容，避免辅助技术朗读无意义图标名。 - 色彩非唯一信号：状态色（
--brutal-status-*）仅作辅助区分，文案（标题/副标题）才是主要信息载体；前景色随*-foreground令牌保证对比度（成功/信息黑字对比 8.6:1 / 5.8:1，过 WCAG AA）。 - 动效降级：尊重
prefers-reduced-motion，无强依赖动效。