APIbeta

AlertBox

Introduce

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

如:

1
2
3
4
5
this.$bpWidget.showAlert('警告');

// 等同于
import bpui from 'bpui.js';
bpui.apiWidget.showAlert('警告');

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
/**
* @desc: 隐藏 alert 或 confirm;
* @param id: 如果不传递id, 则关闭所有对话框.
*/
bpui.apiWidget.hideAlert(id?:DialogID):void;

/**
* @desc: 显示警告框.
*/
bpui.apiWidget.showAlert(cfg:string|{
  title?: string,
  content: string,
  okText?: string,
  confirm?: (id:DialogID)=>void,
}): DialogID;

自定义组件

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

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

注册的自定义组件的要求

如:

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>
  <bp-dialog :title="title" :showClose="false">
    {{content}}
    <div slot="foot">
      <button @click="$emit('confirm')">{{okText}}</button>
    </div>
  </bp-dialog>
</template>

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

  export default {
    components: {
      bpDialog: bpui.bpDialog
    },
    data() {
      return {
        title: '',
        content: '',
        okText: '确认'
      };
    },
  };
</script>

样式结构

组件的样式结构如下:

1
2
3
4
5
6
7
8
9
.bp-widget.bp-dialog.bp-alertClass {
  /* 主块 */
  .bp-widget__content {
    /* 文本块 */
    .bp-dialog__main {}
    /* 按钮块 */
    .bp-dialog__foot.bp-dialog__footOneButton {}
  }
}