本文介绍了使用 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
独立加载状态
截图
代码
<template>
<div style="text-align: center; background: #999;">
<LoadingIndicator />
<br/>
<LoadingIndicator white />
<br/>
<LoadingIndicator tiny />
<br/>
<LoadingIndicator tiny white />
</div>
</template>
页面中部加载
截图
代码
<template>
<div style="min-height: 300px;">
<Loading type="page">加载中</Loading>
</div>
</template>
页面顶部加载
截图
代码
<template>
<Loading type="refresh">上次更新 2016-06-23 11:47</Loading>
</template>
页面底部加载
截图
代码
<template>
<div>
<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<Loading >加载中...</Loading>
</div>
</template>
没有更多了
截图
代码
<template>
<div>
<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<Loading type="nomore">没有更多了</Loading>
</div>
</template>
反馈
- 本页导读 (0)
文档反馈