PageResult 结果页文档介绍了使用该组件的不同方式以及 API 文档:
API 文档 提供了 props、slots、events 的接口信息。
<dependency component="{ PageResult, AButton }" src="@alipay/antui-vue" ></dependency>
import { PageResult, AButton } from '@alipay/antui-vue';
直接使用PageResult.show('系统繁忙');
的方式,调用命令,不需要写在模板中。会自动在document.body
上插入对应DOM
PageResult.show({
type: 'text',
text: '显示的消息'
});
PageResult
提供以下静态方法
name | 说明 | 函数 | |
---|---|---|---|
show | 创建一个PageResult 实例并显示(多次调用会先销毁上次的),创建的参数如下(也可以直接传字符串当做content ) |
Function(option: Object | string): vm |
创建实例时,接受参数如下,
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 图标类型,可选值error ,empty , nofound , network , busy |
string | - |
title | 业务自定义文案最多14个字符 | string | - |
brief | 业务自定义文案最多两行,可不要辅助文案 | string | - |
name | 说明 | scope |
---|---|---|
- | 默认slot,用来放置一个或多个按钮 | - |
title | 用来满足需要自定义DOM 的需求 |
- |
brief | 用来满足需要自定义DOM 的需求 |
- |
name | 说明 | 函数 |
---|---|---|
<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>
<template>
<PageResult type="empty"
title="标题文案"
brief="辅助文案"
>
<AButton type="page-result" >操作选项</AButton>
</PageResult>
</template>
<template>
<PageResult type="busy"
title="系统繁忙"
brief="系统繁忙文案"
>
<AButton type="page-result" >刷新</AButton>
</PageResult>
</template>
在文档使用中是否遇到以下问题
更多建议
匿名提交