Result 结果
用于反馈一系列操作或任务的处理结果。
基础用法
通过 icon、title 和 sub-title 展示标准结果页。
操作成功
您的订单已提交成功，预计 3-5 个工作日送达。
基础用法
不同状态
通过 icon 切换 success、warning、error、info 四种状态。
成功
提交成功
警告
请注意此次操作
错误
提交失败，请重试
信息
这是一条提示信息
不同状态
自定义内容
通过 icon、extra 等插槽自定义结果页内容，默认插槽通常用于放置操作按钮。
📄
404
抱歉，您访问的页面不存在
请检查 URL 是否正确，或返回首页。
自定义内容
在 Nuxt 中使用
YhResult 在 Nuxt 3/4 中可直接作为常规页面反馈组件使用，也适合放入 error.vue 这类全局错误页。
404
抱歉，您访问的页面不存在
在 Nuxt 中使用（模拟 error.vue）
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 标题 | string | undefined |
sub-title | 副标题 | string | undefined |
icon | 状态图标类型 | 'success' | 'warning' | 'error' | 'info' | 'info' |
theme-overrides | 组件级主题变量覆盖 | ComponentThemeVars | undefined |
Events
当前组件未暴露组件事件。
Slots
| 插槽名 | 说明 |
|---|---|
default | 操作区内容 |
icon | 自定义图标内容 |
title | 自定义标题内容 |
sub-title | 自定义副标题内容 |
extra | 额外内容区域，位于副标题与操作区之间 |
Expose
当前组件未暴露公开实例方法或属性。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--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) |
类型导出
| 名称 | 说明 |
|---|---|
YhResultProps | 组件 Props 类型 |
YhResultSlots | 组件插槽类型 |
YhResultIconType | 结果图标联合类型 |
YhResultInstance | 组件实例类型 |