All Products
Search
Document Center

PageResult

Last Updated: May 27, 2021

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

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

ESModule

 
  1. 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.

 
  1. PageResult.show({
  2. type: 'text',
  3. text: 'Displayed message'
  4. });

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

Name Description Function

Demo

Network timeout

Sample image

Sample code

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

System error

Sample image

Sample code

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

Empty

Sample image

Sample code

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

Busy

Sample image

Sample code

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