Loading 加载指示文档介绍了使用该组件的不同方式以及 API 文档:
<dependency component="{ Loading, LoadingIndicator }" src="@alipay/antui-vue" ></dependency>
import { Loading, LoadingIndicator } from '@alipay/antui-vue';
封装过的 Loading,包括全页面加载、页脚加载等。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | Loading类型,可选值为"" ,"page" ,"refresh" ,"nomore" |
String | "" |
name | 说明 | scope |
---|---|---|
- | 默认占位,内容,如果需要支持自定义 DOM |
—- |
独立的 Loading 三方块动画。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
white | 是否显示为白色方块,默认蓝色 | boolean | false |
tiny | 是否显示小尺寸 | boolean | false |
<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>
在文档使用中是否遇到以下问题
更多建议
匿名提交