APIbeta

Popover

Introduce

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

props

widget 所有属性.

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

popover 特有属性

名称 类型 是否必须 描述
direction ‘top’,’bottom’,’left’,’right’或’auto’ 表示方向
trigger ‘click’, ‘hover’, ‘long-press’ 表示在bind的元素上做click或hover动作时,显示popover
bind VueComponent 或 HtmlElement 表示绑定显示在哪个元素上

methods

widget的所有方法.

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

可以使用show, visible, 或trigger动作显示popover

example

示例代码.

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

  1. 使用 trigger动作触发
1
2
3
4
<button ref="btn1">显示</button>
<bp-popover :bind="$refs.btn1" trigger="hover">
  any content
</bp-popover>
  1. 使用 visible显示
1
2
3
4
<button ref="btn1" @click="visible=true">显示</button>
<bp-popover :bind="$refs.btn1" :visible="visible">
  any content
</bp-popover>
  1. 使用cell样式
1
2
3
4
5
6
7
<bp-popover :bind="$refs.btn1" direction="right" trigger="click">
  <div class="bp-popover__cell">cell 1</div>
  <div class="bp-popover__cell">cell 2</div>
  <div class="bp-popover__cell">cell 3</div>
  <div class="bp-popover__cell">cell 4</div>
  <div class="bp-popover__cellWarn">cell warn</div>
</bp-popover>

自定义主题

popover样式结构如下:

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
.bp-popover {
  /* 显示状态 */
  &.bp-widget__visible {}
  /* 隐藏状态 */
  &.bp-widget__invisible {}

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

    /* 主区域 */
    .bp-popover__main {
      /* 箭头 */
      .bp-popover__arrow {}

      /* 箭头不同状态 */
      &[direction^=bottom] {}
      &[direction^=top] {}
      &[direction^=left] {}
      &[direction^=right] {}

      /* cell 样式 */
      .bp-popover__cell {}
      .bp-popover__cellWarn {}
    }
  }
}

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