Result 结果页

用于反馈一系列操作任务的处理结果

主题风格

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-result class="demo-result-success" theme="success" title="操作成功" />
  <re-result class="demo-result-warning" theme="warning" title="警告提示" />
  <re-result class="demo-result-error" theme="error" title="操作失败" />
  <re-result class="demo-result-info" theme="info" title="信息提示" />

<!-- 带描述 -->
  <re-result class="demo-result-desc" theme="success" title="提交成功" description="您的申请已提交,请耐心等待审核" />
  <re-result class="demo-result-desc-error" theme="error" title="提交失败" description="网络异常,请稍后重试" />

<!-- 自定义图片 -->
  <re-result class="demo-result-image" theme="success" title="自定义图片" image="/static/logo.png" />

<!-- 空标题 -->
  <re-result class="demo-result-no-title" theme="info" />

<!-- 空描述 -->
  <re-result class="demo-result-no-desc" theme="success" title="仅标题" />

<!-- 自定义样式 -->
  <re-result class="demo-result-custom-style" theme="success" title="自定义样式" customStyle="margin-top: 20px;" />

<!-- 带操作按钮 -->
  <re-result class="demo-result-action" theme="success" title="操作成功" description="已完成">
  <re-button class="demo-result-action-btn" theme="primary" content="返回首页" />

<!-- 长描述 -->
  <re-result class="demo-result-long-desc" theme="warning" title="注意事项" description="这是一段很长的描述文字,用于测试结果页组件在长文本情况下的展示效果和排版" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-result />。

API

Result Props

名称类型默认值描述必传
themestringdefault主题风格,可选值:default/success/warning/error/infoY
titlestring''标题文本Y
descriptionstring''描述文本Y
iconstring''自定义图标名称Y
imagestring''自定义图片地址Y
customStylestring''自定义样式Y

Result Events

名称参数描述
---

Result Slots

名称描述
icon-
title-
description-
action-