APIbeta

Loading

Introduce

dialog包在初始化时, 会自动向Vue注入一个名为 $bpWidget 的对象, 可以使用此对象进行弹出警告框等操作.

如:

1
2
3
4
5
this.$bpWidget.showLoading('提示信息');

// 等同于
import bpui from 'bpui.js';
bpui.apiWidget.showLoading('提示信息');

See the Pen bp-apiWidget by brainpoint (@brainpoint) on CodePen.

methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
 * 当前是否显示.
 */
bpui.apiWidget.isLoadingVisible():boolean;

/**
* @desc: 清理loading的计数; 设置为0 (一般情况下不要调用).
*/
bpui.apiWidget.clearLoadingCount():void;

/**
* @desc: 隐藏; 不改变内部的loading计数.
*/
bpui.apiWidget.hideLoading():void;

/**
* @desc: 显示; 不改变内部的loading计数.
*/
bpui.apiWidget.showLoading(cfg?:string|{
    content?: string,
    /** 延迟指定的时间后才显示, 但延迟后如果调用了hide, 则不显示 */
    delay?: number
}):void; 

/**
 * @desc: 隐藏; 会将内部的loading计数-1; 直到0为止,才会真正隐藏loading.
 */
bpui.apiWidget.hideLoadingDecrease(): void;

/**
* @desc: 显示; 增加内部的loading计数1. 如果已经存在loading, 则不改变loading的内容.
*/
bpui.apiWidget.showLoadingIncrease(cfg?:string|{
    content?: string,
    /** 延迟指定的时间后才显示, 但延迟后如果调用了hide, 则不显示 */
    delay?: number
}):void; 

/**
 * @desc: 显示在指定的dom元素上; 不改变内部的loading计数
 * 
 * 仅能由 {@link hideLoadingTarget} 隐藏
 */
bpui.apiWidget.showLoadingTarget(
  target: HTMLElement|any,
  cfg?:
    | string
    | {
        content?: string;
        /** 延迟指定的时间后才显示, 但延迟后如果调用了hide, 则不显示 */
        delay?: number;
      }
): void;

/**
 * @desc: 隐藏指定dom元素上的loading; 不改变内部的loading计数.
 */
bpui.apiWidget.hideLoadingTarget(target: HTMLElement|any): void;

内部计数

此特性可以用于异步网络请求等场景

自定义组件

1
2
3
4
/**
* 注册警告框等组件.
*/
bpui.registerDialogComponents({loading: component}): void;

对loading进行组件注册后, 调用 bpui.apiWidget.showLoading 将会弹出注册的组件.

注册的自定义组件的要求

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <widget class="bp-loading" :mask="false" :preventEvent="true">
    <div class="bp-loading__main">
      <bp-icon name="loading"/>
    </div>
    <div class="bp-loading__text">
      {{content}}
    </div>
  </widget>
</template>

<script>
  import bpui from 'bpui.js';

  export default {
    components: {
      widget: bpui.bpWidget,
    },
    data() {
      return {
        content: '',
      }
    },
  };
</script>

样式结构

组件显示的样式结构如下:

1
2
3
4
5
6
.bp-widget.bp-loading{
  /* 上侧图标 */
  .bp-loading__main {}
  /* 下侧文本 */
  .bp-loading__text {}
}