APIbeta

Toast

Introduce

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

如:

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

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

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

methods

1
2
3
4
5
6
7
8
9
10
11
12
/**
* @desc: show toast.
*/
bpui.apiWidget.showToast(cfg?:string|{
  content?: string,
  /** 持续时间 */
  durable?: number,
  /** 显示位置. (默认top) */
  pos?:'center'|'top',
  /** 显示的图标 */
  icon?: string,
}):void;

自定义组件

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

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

注册的自定义组件的要求

如:

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

<template>
  <widget class="bp-toast" :mask="false" :preventEvent="false">
    <div>
      <div class="bp-toast__main">
        {{content}}
      </div>
    </div>
  </widget>
</template>

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

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

样式结构

top显示的样式结构如下:

1
2
3
4
5
6
7
8
9
.bp-toast-wrap {
  /* 主块 */
  .bp-widget.bp-toast {
    /* 右侧图标 */
    .bp-toast__main {}
    /* 左侧文本 */
    .bp-toast__text {}
  }
}

center显示的样式结构如下:

1
2
3
4
5
6
7
8
9
.bp-toast-wrap {
  /* 主块 */
  .bp-widget.bp-toast__center {
    /* 上侧侧图标 */
    .bp-toast__main {}
    /* 下侧文本 */
    .bp-toast__text {}
  }
}