PageResult 结果页_结果页组件_基于 H5 框架 - UI 组件库_前端框架与 UI 组件

PageResult 结果页文档介绍了使用该组件的不同方式以及 API 文档：

在 Kylin 工程中使用该组件。
在其他工程中使用，通过 ESModule 的方式导入组件。

API 文档提供了 props、slots、events 的接口信息。

Kylin

<dependency component="{ PageResult, AButton }" src="@alipay/antui-vue" ></dependency>

ESModule

import { PageResult, AButton } from '@alipay/antui-vue';

Service命令式调用

直接使用PageResult.show('系统繁忙');的方式，调用命令，不需要写在模板中。会自动在document.body上插入对应DOM

PageResult.show({
  type: 'text',
  text: '显示的消息'
});

Service 文档

static methods

PageResult提供以下静态方法

name	说明	函数
show	创建一个`PageResult`实例并显示（多次调用会先销毁上次的），创建的参数如下（也可以直接传字符串当做`content`）	Function(option: Object	string): vm

show options

创建实例时，接受参数如下，

属性	说明	类型	默认值
type	PageResult类型，可选值为`error`,`empty`, `nofound`, `network`, `busy`	string	`busy`
content	纯字符串文本	string	`系统繁忙，请稍后再试`
title	标题文本	string	‘’
btns	显示的按钮数组	`Array<{ text: string, click: Function }>`	[{text: ‘重新加载’,click: () => window.location.reload()}]
zIndex	设置弹层的`zIndex`值	number	9000

API 文档

props

属性	说明	类型	默认值
type	图标类型，可选值`error`,`empty`, `nofound`, `network`, `busy`	string	-
title	业务自定义文案最多14个字符	string	-
brief	业务自定义文案最多两行，可不要辅助文案	string	-

slots

name	说明	scope
-	默认slot，用来放置一个或多个按钮	-
title	用来满足需要自定义`DOM`的需求	-
brief	用来满足需要自定义`DOM`的需求	-

events

name	说明	函数

Demo

网络超时

截图

代码

<template>
  <PageResult type="network"
    title="网络不给力"
    brief="世界上最遥远的距离莫过于此"
  >
    <AButton type="page-result" >刷新</AButton>
  </PageResult>
</template>

系统错误

截图

代码

<template>
  <PageResult type="error"
    title="系统错误正在排查"
    brief="耽误你的时间，我们深表歉意"
  >
    <AButton type="page-result" >刷新</AButton>
  </PageResult>
</template>

empty

截图

代码

<template>
  <PageResult type="empty"
    title="标题文案"
    brief="辅助文案"
  >
    <AButton type="page-result" >操作选项</AButton>
  </PageResult>
</template>

busy

截图

代码

<template>
  <PageResult type="busy"
    title="系统繁忙"
    brief="系统繁忙文案"
  >
    <AButton type="page-result" >刷新</AButton>
  </PageResult>
</template>