全部产品
云市场

PageResult 结果页

更新时间:2020-04-24 23:34:07

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

  • Kylin 工程中使用该组件。
  • 在别的工程中使用,通过 ESModule 的方式来导入组件。

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

Kylin

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

ESModule

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

Service命令式调用

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

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

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

1.网络超时

截图

代码

  1. <template>
  2. <PageResult type="network"
  3. title="网络不给力"
  4. brief="世界上最遥远的距离莫过于此"
  5. >
  6. <AButton type="page-result" >刷新</AButton>
  7. </PageResult>
  8. </template>

2.系统错误

截图

代码

  1. <template>
  2. <PageResult type="error"
  3. title="系统错误正在排查"
  4. brief="耽误你的时间,我们深表歉意"
  5. >
  6. <AButton type="page-result" >刷新</AButton>
  7. </PageResult>
  8. </template>

3.empty

截图

代码

  1. <template>
  2. <PageResult type="empty"
  3. title="标题文案"
  4. brief="辅助文案"
  5. >
  6. <AButton type="page-result" >操作选项</AButton>
  7. </PageResult>
  8. </template>

4.busy

截图

代码

  1. <template>
  2. <PageResult type="busy"
  3. title="系统繁忙"
  4. brief="系统繁忙文案"
  5. >
  6. <AButton type="page-result" >刷新</AButton>
  7. </PageResult>
  8. </template>