7.10 指向性气泡（Popover）

操作菜单气泡，用于展示一组与当前位置相关的操作项。

# 实例

# 基础用法

<template>
  <div class="wrapper">
    <dof-button text="打开操作菜单" @dofButtonClicked="openPopover"></dof-button>
    <dof-popover
      ref="popover"
      :position="{ x: 180, y: 120 }"
      :arrow-position="{ pos: 'top', x: 80 }"
      :buttons="buttons"
      @dofPopoverButtonClicked="onButtonClick"
    ></dof-popover>
  </div>
</template>

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

export default {
  components: { DofButton, DofPopover },
  data() {
    return {
      buttons: [
        { text: '编辑', key: 'edit' },
        { text: '删除', key: 'delete' },
      ],
    }
  },
  methods: {
    openPopover() {
      this.$refs.popover.dofPopoverShow()
    },
    onButtonClick({ key }) {
      console.log(key)
    },
  },
}
</script>

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

# Attributes

Prop	Type	Required	Default	Description
`buttons`	`Array`	N	`[]`	操作项列表，项格式为 `{ text, key, icon }`；为空时不显示菜单内容
`position`	`Object`	N	`{ x: 0, y: 0 }`	气泡绝对位置
`arrow-position`	`Object`	N	`{ pos: 'top', x: 0, y: 0 }`	箭头位置和偏移量
`cover-color`	`String`	N	`transparent`	全屏遮罩颜色
`has-animation`	`Boolean`	N	`true`	是否启用显示和隐藏动画
`text-style`	`Object`	N	`{ color: '#000' }`	操作项文本样式
`theme`	`String`	N	`white`	主题：`white` 或 `black`
`radius`	`Boolean`	N	`false`	是否使用大圆角
`popover-style`	`Object`	N	`{ width: '384px' }`	气泡容器样式
`need-dark-mode`	`Boolean`	N	`false`	是否启用 M-dark/T-dark 内置暗黑适配
`isRTL`	`Boolean`	`N`	`false`	是否启用 RTL（从右到左）布局；默认关闭

RTL 下位置和箭头的水平设置按镜像方向显示；left/right 指基于 LTR 的逻辑侧，操作项索引仍对应原 buttons 数组。

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

# Events

事件名	说明	回调参数
`dofPopoverButtonClicked`	点击操作项后触发	`{ key, index }`

# 7.10 指向性气泡（Popover）

# 实例

# 基础用法

# Attributes

# Events