APIbeta

浮动组件

Introduce

widget 包中大多数组件依赖于 widget 组件;

widget组件在 @bpui/dialog 包中.

1
import {bpWidget} from '@bpui/dialog';

系统中相关浮动的组件如: bpDialog, bpLoading, bpPicker 等都是依赖此组件.

可以使用此组件实现自定义的浮动组件.

使用此组件定制浮动功能, 可以配合navbarView,且能解决遮罩层重叠等问题

props

名称 类型 是否必须 描述
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上

methods

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

mixins或extends

可以使用mixins或extends继承bpWidget组件, 示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="bp-widget" @click="maskClose?hide().then(res=>{}):()=>{}">
    <div class="bp-widget__content" :class="pageClass" :style="pageStyle" @click.stop>
      <slot name="default" />
    </div>
  </div>
</template>

<script>
  import bpDialog from '@bpui/dialog';

  export default {
    mixins: [bpDialog.bpWidget],
    props: {
      maskClose: {
        default: true,
        type: Boolean,
      },
    },
  };
</script>

样式结构

widget的样式结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** widget */
.bp-widget {

  /* 带遮罩状态 */
  &.bp-widget__mask {}

  /* 显示状态 */
  &.bp-widget__visible {}

  /* 隐藏状态 */
  &.bp-widget__invisible {}

  /* widget 内容 */
  .bp-widget__content {}
}

← 0浮动组件