# 7.7 气泡弹出框（Popover 2）

指向性气泡用于针对页面具体位置的内容进行说明或提示。

# 需求场景

# 实例

# 基础用法

<template>
  <div class="wrapper">
    <dof-button ref="btn" text="top" size="small" @dofButtonClicked="$refs.popover.dofPopoverShow()"></dof-button>
    <dof-popover2
      ref="popover"
      :el-pos="elPos"
      :arrow-position="{ x: 60, pos: 'top' }"
      :text-style="{ marginRight: '10px' }"
      :text-content="textContent"
      :cover-color="'rgba(0, 0, 0, 0)'"
      :inner-bg-color="'#E3EBF9'"
      :is-show-close="true"
      @clickedCloseBtn="$refs.popover.hideAction()"
    ></dof-popover2>
  </div>
</template>

<script>
import { DofButton, DofPopover2 } from 'dolphin-intl-ui'

export default {
  components: { DofButton, DofPopover2 },
  data() {
    return {
      textContent: '向左滑动拨档，即可切换冷风',
      elPos: {},
    }
  },
  mounted() {
    this.elPos = { el: this.$refs.btn, offsetX: 0, offsetY: 10 }
  },
}
</script>

<style scoped>
.wrapper {
  flex: 1;
  align-items: center;
  justify-content: center;
}
</style>
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
29
30
31
32
33
34
35
36
37
38
39
40
41

# Attributes

Prop Type Required Default Description
mode String N common 预留模式参数，当前版本设置不生效
theme String N white 气泡主题
layout-direction String N column 按钮布局方向：column 或 row
buttons Array N [] 操作项列表；未传时显示文本内容或默认插槽
position Object N { x: 0, y: 0 } 气泡绝对位置
arrow-position Object N { pos: 'top', x: 0, y: 0 } 箭头位置和偏移量
cover-color String N rgba(0, 0, 0, 0.1) 遮罩颜色
has-animation Boolean N true 是否启用动画
text-style Object N {} 文本样式
text-content String N '' 文本内容
inner-bg-color String N '' 气泡背景颜色
is-click-cover-hide Boolean N true 点击遮罩是否隐藏气泡
is-show-close Boolean N false 是否显示关闭按钮
width Number N 0 气泡宽度
el-pos Object N null 目标元素及偏移，格式为 { el, offsetX, offsetY }
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

RTL 下气泡位置、箭头和按钮布局镜像；position、arrow-position、el-pos.offsetX 按逻辑方向使用，无需在业务侧再次取反。使用锚点时，切换方向会重新测量位置；操作项索引仍对应原 buttons 数组。

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

# Events

事件名 说明 回调参数
dofPopoverButtonClicked 点击操作项后触发 { key, index }
dofPopoverCoverClicked 点击遮罩层时触发 -
clickedCloseBtn 点击关闭按钮时触发 -

← 7.8 缺省页（Default page） →