Tu View PlusResult 结果页
用于反馈一系列操作任务的处理结果，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
基础用法
展示结果状态。
这是标题内容
这是子标题内容
<template>
<tu-result title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>成功状态
展示成功状态。
这是标题内容
这是子标题内容
<template>
<tu-result status="success" title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result status="success" title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>警告状态
展示警告状态。
这是标题内容
这是子标题内容
<template>
<tu-result status="warning" title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result status="warning" title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>错误状态
展示错误状态。
这是标题内容
这是子标题内容
<template>
<tu-result status="error" title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result status="error" title="这是标题内容" subtitle="这是子标题内容">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>HTTP状态码 403
没有当前页面的访问权限。
没有当前页面访问权限。
<template>
<tu-result status="403" subtitle="没有当前页面访问权限。">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result status="403" subtitle="没有当前页面访问权限。">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>HTTP状态码 404
页面未找到。
页面未找到
<template>
<tu-result status="404" subtitle="页面未找到">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result status="404" subtitle="页面未找到">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>HTTP状态码 500
服务器错误。
服务器错误
<template>
<tu-result status="500" subtitle="服务器错误">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template><template>
<tu-result status="500" subtitle="服务器错误">
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>自定义状态
自定义状态。需要传入指定的图标。
这是标题内容
这是子标题内容
<template>
<tu-result status="custom" title="这是标题内容" subtitle="这是子标题内容">
<template #icon>
<Bell />
</template>
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>
<script lang="ts" setup>
import { Bell } from '@tu-view-plus/icons-vue';
</script><template>
<tu-result status="custom" title="这是标题内容" subtitle="这是子标题内容">
<template #icon>
<Bell />
</template>
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
</template>
</tu-result>
</template>
<script lang="ts" setup>
import { Bell } from '@tu-view-plus/icons-vue';
</script>完整功能
完整功能。
这是标题内容
这是子标题内容
额外展示内容
<template>
<tu-result title="这是标题内容" subtitle="这是子标题内容">
<template #icon>
<Camera />
</template>
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
<div style="margin-top: 10px; font-size: 14px">额外展示内容</div>
</template>
</tu-result>
</template>
<script lang="ts" setup>
import { Camera } from '@tu-view-plus/icons-vue';
</script><template>
<tu-result title="这是标题内容" subtitle="这是子标题内容">
<template #icon>
<Camera />
</template>
<template #extra>
<tu-button>取消</tu-button>
<tu-button type="primary">确定</tu-button>
<div style="margin-top: 10px; font-size: 14px">额外展示内容</div>
</template>
</tu-result>
</template>
<script lang="ts" setup>
import { Camera } from '@tu-view-plus/icons-vue';
</script>Result API
Result Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| status | 结果页显示的状态 | String | info |
| title | 标题内容 | String | - |
| subtitle | 子标题内容 | String | - |
Result Slots
| 参数名 | 描述 | 类型 |
|---|---|---|
| icon | 图标 | - |
| title | 标题 | - |
| subtitle | 副标题 | - |
| extra | 操作区 | - |
| default | 默认插槽 | - |