Result 状态结果

介绍

用于展示操作结果。当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

导入

import Result from '@/components/feedback/Result.vue'

用法

成功状态

<template>
  <Result
    status="success"
    title="操作成功"
    description="请耐心等待结果，结果会以手机号、邮箱或其他方式通知您，请保持联系方式畅通"
  />
</template>

等待状态

<template>
  <Result
    status="waiting"
    title="等待处理"
    description="请耐心等待结果，结果会以手机号、邮箱或其他方式通知您，请保持联系方式畅通"
  />
</template>

提示状态

<template>
  <Result
    status="info"
    title="信息提示"
    description="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
  />
</template>

警告状态

<template>
  <Result
    status="warning"
    title="警告提示"
    description="您没有权限访问此页面"
  />
</template>

失败状态

<template>
  <Result
    status="error"
    title="无法完成操作"
    description="因为某某原因您无法执行此操作，请参考某某解决方法"
  />
</template>

自定义图标

<template>
  <Result
    icon="smile"
    title="我们真诚聆听您的建议"
    description="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
  />
</template>

API 参考

Result

状态结果组件。

Props

名称	说明	类型	必填	默认值
title	标题	string	-	-
description	描述	string	-	-
icon	自定义图标	string	-	-
status	状态类型	'success'|'error'|'info'|'waiting'|'warning'	-	'info'

Slots

名称	说明
default	默认插槽，用于显示文字内容

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
ResultIconSize	number	100	图标大小
ResultIconInfo	string	'prompt-filling'	提示状态图标
ResultIconSuccess	string	'success-filling'	成功状态图标
ResultIconError	string	'delete-filling'	失败状态图标
ResultIconWaiting	string	'clock-filling'	等待状态图标
ResultIconWarning	string	'warning-filling'	警告状态图标
ResultColorInfo	string	'primary'	提示状态颜色
ResultColorSuccess	string	'success'	成功状态颜色
ResultColorError	string	'danger'	失败状态颜色
ResultColorWaiting	string	'primary'	等待状态颜色
ResultColorWarning	string	'warning'	警告状态颜色
ResultTitleFontSize	number	36	标题字体大小
ResultTitleColor	string	'black'	标题颜色
ResultTitleBold	boolean	true	标题是否加粗
ResultTitleMarginTop	number	10	标题与图标间距
ResultDescriptionFontSize	number	28	描述字体大小
ResultDescriptionColor	string	'text.second'	描述颜色
ResultDescriptionBold	boolean	false	描述是否加粗
ResultDescriptionMarginTop	number	10	描述与标题间距