Vue DevUI
主题

Result 结果

操作结果反馈。

何时使用

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

基本用法

操作成功
操作成功描述
操作失败
操作失败描述
操作警告
操作警告描述
操作信息
操作信息描述
<template>
  <div>
    <d-row wrap>
      <d-col :lg="6" :xs="24">
        <d-result icon="success" title="操作成功" desc="操作成功描述"></d-result>
      </d-col>
      <d-col :lg="6" :xs="24">
        <d-result icon="danger" title="操作失败" desc="操作失败描述"></d-result>
      </d-col>
      <d-col :lg="6" :xs="24"><d-result icon="warning" title="操作警告" desc="操作警告描述"></d-result></d-col>
      <d-col :lg="6" :xs="24"><d-result icon="info" title="操作信息" desc="操作信息描述"></d-result></d-col>
    </d-row>
  </div>
</template>

自定义

这是自定义标题
操作成功描述
<template>
  <div>
    <d-result desc="操作成功描述">
      <template #icon>
        <d-icon name="insert-image" size="64px"></d-icon>
      </template>
      <template #title>这是自定义标题</template>
      <template #extra>
        <d-button id="primaryBtn" style="margin-right: 8px">回到首页</d-button>
      </template>
    </d-result>
  </div>
</template>

Result 参数

参数名类型默认说明跳转 Demo
iconResultIcon'info'指定 icon 类型基本用法
titlestring-结果标题基本用法
descstring-结果描述基本用法

Result 插槽

参数名说明
icon自定义图标
title自定义标题
desc自定义描述内容
extra底部额外区域

Result 类型定义

ResultIcon 

type ResultIcon = 'success' | 'danger' | 'warning' | 'info';
Contributors
粤A2-20044005号