Result 结果
用于反馈一系列操作任务的处理结果。
基础用法
最简单的使用方式，设置 icon、title 和 sub-title 属性。
操作成功
您的订单已提交成功，预计 3-5 个工作日送达。
基础用法
不同状态
通过 icon 属性设置不同的状态图标：success、warning、error、info。
成功
提交成功
警告
请注意此操作
错误
提交失败，请重试
信息
这是一条提示信息
不同状态
自定义内容
通过 #icon、#extra 插槽自定义图标和额外内容区域。默认插槽用于放置操作按钮。
🔍
404
抱歉，您访问的页面不存在
请检查 URL 是否正确，或返回首页。
自定义内容
在 Nuxt 中使用
Result 组件完全支持 Nuxt 3/4 的 SSR 渲染。以下示例展示了在 Nuxt 中将 Result 用作 error.vue 全局错误页，结合 useError、clearError 等 Nuxt 专属 API 动态响应不同的 HTTP 错误码。
404
抱歉，您访问的页面不存在
Nuxt 中使用（模拟 error.vue）
SSR 注意事项：
- ✅ 所有 Props 和样式完全支持
- ✅ SVG 图标正确渲染
- ✅ 插槽内容（icon、title、sub-title、extra、default）完整渲染
- ✅ 可作为 Nuxt 的
error.vue错误页面使用 - ✅ 动态状态（icon 类型切换）正常工作
SSR 安全性
Result 组件已通过完整的 SSR 测试，确保服务端和客户端渲染完全一致，Hydration 无错误。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | — |
| subTitle | 副标题 | string | — |
| icon | 图标类型 | 'success' | 'warning' | 'error' | 'info' | 'info' |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 操作区域（通常放置按钮） |
| icon | 自定义图标内容 |
| title | 自定义标题内容 |
| sub-title | 自定义副标题内容 |
| extra | 额外内容区域（位于副标题与操作区之间） |
主题变量
Result 组件支持通过覆盖以下 CSS 变量来自定义局部样式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-result-padding | 容器内边距 | 40px 30px |
--yh-result-icon-size | 图标尺寸 | 72px |
--yh-result-icon-margin | 图标下边距 | 20px |
--yh-result-title-size | 标题字号 | 20px |
--yh-result-title-color | 标题颜色 | var(--yh-text-color-primary, #303133) |
--yh-result-subtitle-size | 副标题字号 | 14px |
--yh-result-subtitle-color | 副标题颜色 | var(--yh-text-color-secondary, #909399) |