All Products
Search
Document Center

Mobile Platform as a Service:PageResult

Last Updated:Mar 08, 2022

The PageResult topic describes different methods of using this component and the API descriptions:

  • Use this component in the Kylin project.

  • Use this component in other projects. Import it through ESModule.

  • API description provides API information for props, slots, and events.

Kylin

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

ESModule

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

Service imperative call

You can directly use PageResult.show ('system busy'); to call a command, instead of writing the command in a template. The DOM will be automatically inserted into document.body.

PageResult.show({
  type: 'text',
  text: 'Displayed message'
});

Service documentation

static methods

PageResult provides the following static methods.

Name

Description

Function

show

Creates and displays a PageResult instance with the following parameters. If the instance is called multiple times, the previous instance will be destructed. You can also directly input a character string as the content.

Function(option: Object | string): vm

show options

The following parameters are accepted for creating an instance.

Property

Description

Type

Default value

type

PageResult type. Value options include error, empty, nofound, network, and busy.

String

busy

content

Pure character string text.

String

The system is busy, please try again later.

title

Title text.

String

‘’

btns

Array of displayed buttons.

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

[{text: ‘Reload’,click: () => window.location.reload()}]

zIndex

Specifies the zIndex value of the elastic layer.

Number

9000

API description

props

Property

Description

Type

Default value

type

Icon type. Value options include error, empty, nofound, network, and busy.

String

-

title

The custom business text contains no more than 14 characters.

String

-

brief

The custom business text contains no more than two lines. Auxiliary text is optional.

String

-

slots

Name

Description

Scope

-

Default slot used to place one or more buttons.

-

title

Used to define the DOM.

-

brief

Used to define the DOM.

-

events:None

Demo

Network timeout

Sample image

Network timeout

Sample code

<template>

  <PageResult type="network"
    title="Network Timeout"
    brief="The farthest distance in this world."
  >
    <AButton type="page-result" >Refresh</AButton>
  </PageResult>

</template>

System error

Sample image

Troubleshooting

Sample code

<template>

  <PageResult type="error"
    title="Troubleshooting in Progress"
    brief="We are sorry for the inconvenience."
  >
    <AButton type="page-result" >Refresh</AButton>
  </PageResult>

</template>

Empty

Sample image

Action options

Sample code

<template>

  <PageResult type="empty"
    title="A maximum of 14 characters is allowed."
    brief="Auxiliary content"
  >
    <AButton type="page-result" >Action options</AButton>
  </PageResult>

</template>

Busy

Sample image

System timeout

Sample code

<template>

  <PageResult type="busy"
    title="System Busy"
    brief="System tiemout content"
  >
    <AButton type="page-result" >Refresh</AButton>
  </PageResult>

</template>