APIbeta

Dialog

Introduce

dialog组件内部使用了 widget 组件. 拥有widget的所有属性和方法.

props

widget 所有属性.

名称 类型 是否必须 描述
visible boolean 表示是否显示; 允许使用 visible.sync 进行双向绑定
mask boolean 是否显示遮罩层. (默认为 true)
maskClose boolean 是否点击遮罩层后关闭. (默认为 false)
preventEvent boolean 是否阻止时间传递到遮罩层及以下. (默认为 true)
pageClass String或Array 除遮罩层外的内容层的样式类.
pageStyle String或Array或Object 除遮罩层外的内容层的样式
appendToBody boolean或’true’或’false’ 是否添加到body上

dialog相关属性

名称 类型 是否必须 描述
showClose boolean 表示右上角是否显示关闭按钮
title string 标题; 如果为提供 slot=title 的内容则使用此属性作为标题

slots

名称 描述
title 标题
foot 底部按钮; 底部按钮使用button时, 支持最多3个按钮的自动排列

例如:

1
<div slot="title">自定义标题</div>
1
2
3
4
5
<div slot="foot">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

methods

widget的所有方法.

名称 描述
show():Promise 显示
hide():Promise 隐藏

hook

当背景页面存在垂直滚动条, 对话框等浮动组件弹出时, 如果背景元素使用fixed等定位, 在滚动条消失的瞬间, 页面多出了滚动条宽度而会出现页面跳动的情况.

可以使用如下的hook方法来进行消除页面跳动.

1
2
3
4
5
6
7
8
9
10
/**
 * 添加页面抖动hook.
 * 回调方法中的paddingRight参数表示发生抖动时页面中fixed元素应该在原有paddingRight值上增加的像素值.
 */
bpui.hook.addWidgetShake(foo:(paddingRight:number)=>void);

/**
 * 移除页面抖动hook.
 */
bpui.hook.removeWidgetShake(foo:(paddingRight:number)=>void);

example

示例代码.

1
2
3
4
5
6
7
<bp-dialog :visible.sync="visible1" title="hello">
  dialog1
  <div slot="foot">
    <button @click="visible1=false">close</button>
    <button @click="visible2=true">show dialog2</button>
  </div>
</bp-dialog>

See the Pen QWbgryv by brainpoint (@brainpoint) on CodePen.

自定义主题

dialog样式结构如下:

默认的 z-index=2000 向上递增.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.bp-dialog {
  /* 显示状态 */
  &.bp-widget__visible {}
  /* 隐藏状态 */
  &.bp-widget__invisible {}

  /* 除遮罩层外的对话框内容 */
  .bp-widget__content {

    /* 关闭按钮 */
    .bp-dialog__close {}

    /* 标题 */
    .bp-dialog__title {}

    /* 对话框内容 */
    .bp-dialog__main {}

    /* 底部按钮 */
    .bp-dialog__foot {}
  }
}

scss样式文件存放在@bpui/dialog/style 目录下, 可以复制修改以定制主题

注册dialog组件

注册dialog组件到全局后, 可以在任意地方使用api的方式来显示.

1
2
3
4
5
6
/**
* @desc: 注册自定义模式对话框组件.
* @param name 组件名称, 如果已经存在则覆盖
* @return 表明注册的名称是否不存在; 如果已经存在则覆盖, 并返回false.
*/
bpui.registerDialogCustom(name: string, component: any): boolean;
1
2
3
4
5
6
7
8
9
10
/**
 * @desc: 显示.
 * @param cfg 传递data,props,on等内容.
 */
bpui.apiWidget.showCustom(name:string, cfg?: { data?: any; props?: any; on?: any; [index: string]: any }):DialogID;

/**
* @desc: 隐藏
*/
bpui.apiWidget.hideCustom(id:DialogID):void;

注册的自定义组件的要求

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <bp-dialog :maskClose="true" :showClose="false">
    <div slot="title">hello2</div>
  </bp-dialog>
</template>

<script lang="ts">
  import {
    Component,
    Vue,
  } from "vue-property-decorator";

  import bpui from 'bpui.js';

  @Component({
    components: {
      bpDialog: bpui.bpDialog,
    }
  })
  export default class extends Vue {
  }
</script>