PageResult 结果页

本文介绍了使用 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 提供以下静态方法。

属性

说明

函数

show

创建一个 PageResult 实例并显示,多次调用会先销毁上次的,创建的参数如下,也可以直接传字符串当做 content

Function(option: Object|string): vm

show options:创建实例时,支持的参数如下表所示。

属性

说明

类型

默认值

type

PageResult 类型,可选值 erroremptynofoundnetworkbusy

String

busy

content

纯字符串文本。

String

系统繁忙,请稍后再试

title

标题文本。

String

‘’”

btns

显示的按钮数组。

Array<{ text: string, click: Function }>

[{text: ‘重新加载’,click: () => window.location.reload()}]

zIndex

设置弹层的 zIndex 值。

Number

9000

API 说明

props

属性

说明

类型

type

图标类型,可选值 erroremptynofoundnetworkbusy

String

title

业务自定义文案最多 14 个字符。

String

brief

业务自定义文案最多两行,可不要辅助文案。

String

slots

属性

说明

scope

-

默认 slot,用来放置一个或多个按钮。

-

title

用来满足需要自定义 DOM 的需求。

-

brief

用来满足需要自定义 DOM 的需求。

-

events:无。

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>
阿里云首页 移动开发平台 mPaaS 相关技术圈