Result 结果

用于对用户的操作结果或者异常状态做反馈。

import { Result as ElResult } from '@szhn/dh-design-pc'

基础用法

通过 icon 属性切换展示的结果状态，支持 success / warning / info / error / primary。

<template>
  <el-row>
    <el-col :sm="12" :lg="6" :xl="4">
      <el-result
        icon="primary"
        title="Primary Tip"
        sub-title="Please follow the instructions"
      >
        <template #extra>
          <el-button type="primary">Back</el-button>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6" :xl="4">
      <el-result
        icon="success"
        title="Success Tip"
        sub-title="Please follow the instructions"
      >
        <template #extra>
          <el-button type="primary">Back</el-button>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6" :xl="4">
      <el-result
        icon="warning"
        title="Warning Tip"
        sub-title="Please follow the instructions"
      >
        <template #extra>
          <el-button type="primary">Back</el-button>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6" :xl="4">
      <el-result
        icon="error"
        title="Error Tip"
        sub-title="Please follow the instructions"
      >
        <template #extra>
          <el-button type="primary">Back</el-button>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6" :xl="4">
      <el-result icon="info" title="Info Tip">
        <template #sub-title>
          <p>Using slot as subtitle</p>
        </template>
        <template #extra>
          <el-button type="primary">Back</el-button>
        </template>
      </el-result>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { Button as ElButton, Col as ElCol, Result as ElResult, Row as ElRow } from '@szhn/dh-design-pc'

</script>

自定义内容

可以通过 icon / title / sub-title / extra 具名插槽自定义结果页。

<script setup lang="ts">
import { Button as ElButton, Image as ElImage, Result as ElResult } from '@szhn/dh-design-pc'

</script>

<template>
  <el-result title="404" sub-title="Sorry, request error">
    <template #icon>
      <el-image
        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      />
    </template>
    <template #extra>
      <el-button type="primary">Back</el-button>
    </template>
  </el-result>
</template>

404 页面场景

典型的错误页面展示，组合 Result 与返回按钮。

<template>
  <el-result
    icon="error"
    title="404"
    sub-title="抱歉，您访问的页面不存在"
  >
    <template #extra>
      <el-button type="primary">返回首页</el-button>
    </template>
  </el-result>
</template>

<script lang="ts" setup>
import { Result as ElResult, Button as ElButton } from '@szhn/dh-design-pc'

</script>

成功反馈

在表单提交或完成某个操作后，使用 Result 呈现成功信息。

<template>
  <el-result
    icon="success"
    title="提交成功"
    sub-title="您的订单已受理，预计 2 个工作日内送达"
  >
    <template #extra>
      <el-space>
        <el-button type="primary">查看订单</el-button>
        <el-button>继续购物</el-button>
      </el-space>
    </template>
  </el-result>
</template>

<script lang="ts" setup>
import { Result as ElResult, Button as ElButton, Space as ElSpace } from '@szhn/dh-design-pc'

</script>

API

Attributes

属性名	说明	类型	默认值
title	Result 组件的标题	string	''
sub-title	Result 组件的副标题	string	''
icon	图标类型	success / warning / info / error / primary	info

插槽

名称	说明
icon	图标内容
title	标题内容
sub-title	副标题内容
extra	额外操作区域

更多配置参见 Element Plus Result。