介绍

用于反馈用户的操作结果。

引入

import Result from 'sard-uniapp/components/result/result.vue'

代码演示

基础使用

设置 status 属性展示不同状态的结果。

<template>
  <sar-result status="success" title="成功" description="请根据提示进行操作" />
  <sar-result status="info" title="信息" description="请根据提示进行操作" />
  <sar-result status="warning" title="警告" description="请根据提示进行操作" />
  <sar-result status="error" title="错误" description="请根据提示进行操作" />
  <sar-result status="question" title="疑惑" description="请根据提示进行操作" />
</template>

额外内容

默认插槽内容会在底部展示。

<template>
  <sar-result status="success" title="成功" description="请根据提示进行操作">
    <sar-button>自定义操作</sar-button>
  </sar-result>
</template>

自定义图标

通过 icon 属性设置自定义图标。

<template>
  <sar-result
    icon="emoji-smile"
    icon-family="demo-icons"
    icon-color="var(--sar-red)"
    title="笑一笑"
    description="请根据提示进行操作"
  />
</template>

API

ResultProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
status	结果的状态	'success' | 'info' | 'warning' | 'error' | 'question'	'info'
icon	图标名称	string	-
icon-family	图标字体	string	-
icon-color	图标颜色	string	-
title	标题	string	-
description	描述	string	-

ResultSlots

插槽	描述	属性
default	自定义额外内容	-
title	自定义标题	-
description	自定义描述	-
icon	自定义图标	-

主题定制

CSS 变量

page,
.sar-portal {
  --sar-result-icon-font-size: 96rpx;
  --sar-result-icon-line-height: var(--sar-leading-none);

  --sar-result-success-color: var(--sar-success);
  --sar-result-info-color: var(--sar-info);
  --sar-result-warning-color: var(--sar-warning);
  --sar-result-error-color: var(--sar-danger);
  --sar-result-question-color: var(--sar-primary);

  --sar-result-title-margin-top: 32rpx;
  --sar-result-title-font-size: var(--sar-text-xl);

  --sar-result-description-margin-top: 8rpx;
  --sar-result-description-font-size: var(--sar-text-base);
  --sar-result-description-color: var(--sar-tertiary-color);

  --sar-result-extra-margin-top: 32rpx;
}