ElementPlus Result 结果

Result 结果

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

基础用法

ElementPlus Result 结果

<template>
  <el-row>
  <el-col :sm="12" :lg="6">
    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
      <template #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 #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 #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 #extra>
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
</el-row>
</template>

自定义内容

ElementPlus Result 结果

<template>
  <el-result title="404" subTitle="抱歉,请求错误">
  <template #icon>
    <el-image
      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" rel="external nofollow" 
    ></el-image>
  </template>
  <template #extra>
    <el-button type="primary" size="medium">返回</el-button>
  </template>
</el-result>
</template>

Result Attributes

参数说明类型可选值默认值
title标题string
sub-title二级标题string
icon图标类型stringsuccess / warning / info / errorinfo

Result Slots

Name说明
icon自定义图标
title自定义标题
subTitle自定义二级标题
extra自定义底部额外区域

作者:冒牌SEO,如若转载,请注明出处:https://www.web176.com/elementplus/19847.html

(0)
打赏 支付宝 支付宝 微信 微信
冒牌SEO冒牌SEO
上一篇 2023年5月8日
下一篇 2023年5月8日

相关推荐

发表回复

登录后才能评论