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 | 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 | String |
|
content | Pure character string text. | String |
|
title | Title text. | String | ‘’ |
btns | Array of displayed buttons. |
| [{text: ‘Reload’,click: () => window.location.reload()}] |
zIndex | Specifies the | Number | 9000 |
API description
props
Property | Description | Type | Default value |
---|---|---|---|
type | Icon type. Value options include | 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 | - |
brief | Used to define the | - |
events:None
Demo
Network timeout
Sample image
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
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
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
Sample code
<template>
<PageResult type="busy"
title="System Busy"
brief="System tiemout content"
>
<AButton type="page-result" >Refresh</AButton>
</PageResult>
</template>