APIbeta

ConfirmBox

Introduce

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

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
this.$bpWidget.showConfirm('确认?', 
  (id:DialogID)=>{
    console.log('confirm');
  },
  (id:DialogID)=>{
    console.log('cancel');
  },
);

// 等同于
import bpui from 'bpui.js';
bpui.apiWidget.showConfirm('确认?', 
  (id:DialogID)=>{
    console.log('confirm');
  },
  (id:DialogID)=>{
    console.log('cancel');
  },
);

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

/**
* @desc: 显示确认框.
*/
bpui.apiWidget.showConfirm(cfg:string|{
  title?: string,
  content: string,
  okText?: string,
  cancelText?: string,
  confirm?: (id:DialogID)=>void,
  cancel?: (id:DialogID)=>void,
}): DialogID;

自定义组件

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

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

注册的自定义组件的要求

如:

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

<template>
  <bp-dialog :title="title" :showClose="false">
    {{content}}
    <div slot="foot">
      <button @click="$emit('cancel')" style="font-weight:500;">{{cancelText}}</button>
      <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: '确认',
        cancelText: '取消'
      };
    }
  };
</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__footTwoButton {}
  }
}