el-result详解

el-result 是 Element Plus 框架中的结果组件，用于展示操作的结果或提示信息。它常用于页面跳转、操作反馈等场景。

el-result 属性详解

1. title:

   • 类型: String
   • 用途: 结果组件的标题。
   • 默认值: —

2. subTitle:

   • 类型: String
   • 用途: 结果组件的副标题。
   • 默认值: —

3. icon:

   • 类型: String
   • 用途: 结果组件的图标，可选值为 success、warning、error、info。
   • 默认值: info

4. status:

   • 类型: String
   • 用途: 结果组件的状态，可选值为 success、warning、error、info。
   • 默认值: info

el-result 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义结果组件的主要内容。

2. icon:

   • 插槽名称: icon
   • 用途: 自定义结果组件的图标。

3. title:

   • 插槽名称: title
   • 用途: 自定义结果组件的标题。

4. sub-title:

   • 插槽名称: sub-title
   • 用途: 自定义结果组件的副标题。

完整示例代码

<template>
  <div>
    <h2>Result 示例</h2>

    <!-- 基本用法 -->
    <el-result title="成功提示" subTitle="操作已成功完成">
    </el-result>

    <!-- 成功状态 -->
    <el-result status="success" title="成功提示" subTitle="操作已成功完成">
    </el-result>

    <!-- 警告状态 -->
    <el-result status="warning" title="警告提示" subTitle="请检查输入的信息">
    </el-result>

    <!-- 错误状态 -->
    <el-result status="error" title="错误提示" subTitle="操作失败，请重试">
    </el-result>

    <!-- 信息状态 -->
    <el-result status="info" title="信息提示" subTitle="这是一个信息提示">
    </el-result>

    <!-- 自定义图标 -->
    <el-result status="info" title="自定义图标">
      <template #icon>
        <i class="el-icon-warning" style="font-size: 48px; color: orange;"></i>
      </template>
    </el-result>

    <!-- 自定义标题和副标题 -->
    <el-result status="success" title="自定义标题" subTitle="自定义副标题">
      <template #title>
        <h1>自定义标题</h1>
      </template>
      <template #sub-title>
        <p>自定义副标题</p>
      </template>
    </el-result>

    <!-- 自定义主要内容 -->
    <el-result status="error" title="自定义内容">
      <template #default>
        <p>这是一个自定义的内容区域。</p>
        <el-button type="primary" @click="handleRetry">重新尝试</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const handleRetry = () => {
  ElMessage({
    message: '已重新尝试',
    type: 'success'
  })
}
</script>

代码解释

1. 基本用法:

   • 使用 el-result 组件并设置 title 和 subTitle 属性。

   • <el-result title="成功提示" subTitle="操作已成功完成">
     </el-result>
     

2. 成功状态:

   • 使用 status="success" 属性设置结果组件为成功状态。

   • <el-result status="success" title="成功提示" subTitle="操作已成功完成">
     </el-result>
     

3. 警告状态:

   • 使用 status="warning" 属性设置结果组件为警告状态。

   • <el-result status="warning" title="警告提示" subTitle="请检查输入的信息">
     </el-result>
     

4. 错误状态:

   • 使用 status="error" 属性设置结果组件为错误状态。

   • <el-result status="error" title="错误提示" subTitle="操作失败，请重试">
     </el-result>
     

5. 信息状态:

   • 使用 status="info" 属性设置结果组件为信息状态。

   • <el-result status="info" title="信息提示" subTitle="这是一个信息提示">
     </el-result>
     

6. 自定义图标:

   • 使用 icon 插槽自定义结果组件的图标。

   • <el-result status="info" title="自定义图标">
       <template #icon>
         <i class="el-icon-warning" style="font-size: 48px; color: orange;"></i>
       </template>
     </el-result>
     

7. 自定义标题和副标题:

   • 使用 title 和 sub-title 插槽自定义结果组件的标题和副标题。

   • <el-result status="success" title="自定义标题" subTitle="自定义副标题">
       <template #title>
         <h1>自定义标题</h1>
       </template>
       <template #sub-title>
         <p>自定义副标题</p>
       </template>
     </el-result>
     

8. 自定义主要内容:

   • 使用默认插槽自定义结果组件的主要内容。

   • <el-result status="error" title="自定义内容">
       <template #default>
         <p>这是一个自定义的内容区域。</p>
         <el-button type="primary" @click="handleRetry">重新尝试</el-button>
       </template>
     </el-result>
     

事件处理函数

• handleRetry:

  • 处理重新尝试按钮的点击事件。

  • const handleRetry = () => {
      ElMessage({
        message: '已重新尝试',
        type: 'success'
      })
    }