loading 加载动画api 3.0.0

Loading API，调用后显示一个带弹层的居中显示的加载中组件。

使用说明

引用方式

// 以 API 的形式引入 loading
import { loading } from 'yo3/component/loading';
// 以组件的形式引入 Loading
import Loading from 'yo3/component/loading';

注意：loading 的引用方式与其他组件不同。

  • import { loading } from 'yo3/component/loading' 的方式引入的是 API 形式的 loading 组件；
  • import Loading from 'yo3/component/loading' 引入的是标签形式的 React 组件。

基本用法：

调用 loading.show 和 loading.hide 可以控制组件的显示与隐藏：

import { loading } from 'yo3/component/loading';

loading.show();
loading.hide();

设置遮罩的范围

设置 maskOffset 属性可以控制 loading 的遮罩层的范围，maskOffset是一个数组，其中第一个元素对应遮罩上边缘距离顶部的距离，而第二个元素对应遮罩下边缘距离底部的距离：

// 这个loading的遮罩没有遮盖住导航条
loading.show({
  maskOffset: [44, 0]
});

扩展用法：

你还可以通过设置 extraClass 来给 loading 的根节点添加额外的样式类（比如这里改变了遮罩的透明度）。

设置 text 属性，可以给 loading 的图标下面添加描述文字：

loading.show({
  extraClass: 'yo-loading-b',
  text: 'loading'
});
属性

text { String } #

loading伴随动画图标的文字。

默认值: ''

extraClass { String } #

附加给loading组件内层的div的额外class。

默认值: ''

modalExtraClass { String } #

附加给外层modal组件的额外class。

默认值: ''

show { Bool } #

是否显示loading，true为显示loading动画，false为隐藏。

默认值: false

contentOffset { Array } #

内容区在水平/垂直方向上的偏移,例如[0,-100]可以使模态框内容区向上偏移100个像素。

默认值: [0,0]

maskOffset { Array } #

蒙层遮盖的范围。如果不需要蒙层遮盖住整个屏幕,可以设置这个属性。

数组的第一个元素代表蒙层上边缘距离屏幕顶部的距离,第二个元素代表下边缘距离底部的距离。

默认值: [0,0]

方法

show 3.0.0 #

api方法：显示Loding层，并设置传入的options参数中的属性。

方法参数:

参数名 类型 描述 必选 支持版本
options Object 需要设置的组件属性，如预留顶部高度，额外样式之类的，具体见上面的属性文档描述。

hide 3.0.0 #

api方法：隐藏Loding层。