Element UI 结果反馈组件 Result 使用指南

Element UI 结果反馈组件 Result 使用指南

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

组件概述

Result 是 Element UI 提供的一个结果反馈组件，主要用于向用户展示操作结果或访问异常状态。该组件能够清晰地呈现成功、警告、错误和信息等不同类型的反馈，帮助用户快速理解当前状态并采取相应操作。

基础用法

Result 组件提供了四种预设的图标类型，分别对应不同的操作结果状态：

<el-row>
  <el-col :sm="12" :lg="6">
    <el-result icon="success" title="操作成功" subTitle="请按照提示继续操作">
      <template slot="extra">
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
  <el-col :sm="12" :lg="6">
    <el-result icon="warning" title="操作警告" subTitle="请按照提示继续操作">
      <template slot="extra">
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
  <el-col :sm="12" :lg="6">
    <el-result icon="error" title="操作失败" subTitle="请按照提示继续操作">
      <template slot="extra">
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
  <el-col :sm="12" :lg="6">
    <el-result icon="info" title="信息提示" subTitle="请按照提示继续操作">
      <template slot="extra">
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
</el-row>

参数说明

• icon: 指定结果图标类型，支持 success/warning/error/info 四种预设值
• title: 主标题，通常简要说明结果状态
• subTitle: 副标题，可提供更详细的说明或操作指引
• extra 插槽: 用于放置操作按钮等额外内容

自定义内容

除了使用预设图标，Result 组件还支持完全自定义内容：

<el-result title="404" subTitle="抱歉，请求出错">
  <template slot="icon">
    <el-image src="自定义图片路径.png"></el-image>
  </template>
  <template slot="extra">
    <el-button type="primary" size="medium">返回首页</el-button>
  </template>
</el-result>

自定义技巧

1. 图标自定义：通过 icon 插槽可以替换默认图标，支持图片、SVG 或任何 HTML 内容
2. 标题自定义：使用 title 和 subTitle 插槽可以完全控制标题的显示方式
3. 操作区域：extra 插槽可以放置多个按钮或复杂操作组件

组件属性详解

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |------------|---------------|----------|---------------------------|--------| | title | 主标题内容 | string | - | - | | sub-title | 副标题内容 | string | - | - | | icon | 图标类型 | string | success/warning/info/error | info |

插槽功能

| 插槽名 | 说明 | |-----------|--------------------| | icon | 自定义图标区域 | | title | 自定义主标题区域 | | subTitle | 自定义副标题区域 | | extra | 自定义额外操作区域 |

最佳实践建议

1. 状态一致性：保持图标类型与反馈状态一致，避免给用户造成混淆
2. 明确指引：在副标题中提供明确的操作指引，帮助用户理解下一步操作
3. 操作按钮：在 extra 区域放置相关操作按钮，如"返回"、"重试"等
4. 响应式设计：结合 el-row 和 el-col 实现响应式布局，确保在不同设备上都有良好显示

Result 组件是提升用户体验的重要工具，合理使用可以有效减少用户困惑，引导用户完成后续操作流程。

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element