本文介绍了使用 Loading 加载指示组件的不同方式以及相关 API。
Kylin
<dependency component="{ Loading, LoadingIndicator }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Loading, LoadingIndicator } from '@alipay/antui-vue';
API 说明
Loading:封装过的 Loading,包括全页面加载、页脚加载等。
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | Loading类型,可选值为 | String | "" |
slots:默认占位,内容,如果需要支持自定义 DOM。
LoadingIndicator:为独立的 Loading 三方块动画。
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
white | 是否显示为白色方块,默认蓝色。 | boolean | false |
tiny | 是否显示小尺寸。 | boolean | false |
Demo
独立加载状态
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72589/AntCloud_zh/1564110707254/Loading%20%E5%8A%A0%E8%BD%BD%E6%8C%87%E7%A4%BA%E2%80%94%E7%8B%AC%E7%AB%8B%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81.png)
代码
<template>
<div style="text-align: center; background: #999;">
<LoadingIndicator />
<br/>
<LoadingIndicator white />
<br/>
<LoadingIndicator tiny />
<br/>
<LoadingIndicator tiny white />
</div>
</template>
页面中部加载
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72589/AntCloud_zh/1564110739269/Loading%20%E5%8A%A0%E8%BD%BD%E6%8C%87%E7%A4%BA%E2%80%94%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E4%B8%AD.png)
代码
<template>
<div style="min-height: 300px;">
<Loading type="page">加载中</Loading>
</div>
</template>
页面顶部加载
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72589/AntCloud_zh/1564110771753/Loading%20%E5%8A%A0%E8%BD%BD%E6%8C%87%E7%A4%BA%E2%80%94%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E5%8A%A0%E8%BD%BD.png)
代码
<template>
<Loading type="refresh">上次更新 2016-06-23 11:47</Loading>
</template>
页面底部加载
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72589/AntCloud_zh/1564110812204/Loading%20%E5%8A%A0%E8%BD%BD%E6%8C%87%E7%A4%BA%E2%80%94%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8%E5%8A%A0%E8%BD%BD.png)
代码
<template>
<div>
<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<Loading >加载中...</Loading>
</div>
</template>
没有更多了
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72589/AntCloud_zh/1564110841145/Loading%20%E5%8A%A0%E8%BD%BD%E6%8C%87%E7%A4%BA%E2%80%94%E6%B2%A1%E6%9C%89%E6%9B%B4%E5%A4%9A.png)
代码
<template>
<div>
<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<Loading type="nomore">没有更多了</Loading>
</div>
</template>
文档内容是否对您有帮助?