BubbleBox 气泡框

介绍

气泡框组件，用于在页面上显示一个可交互的气泡框，支持点击触发弹出气泡式的卡片浮层。

导入

import BubbleBox from '@/components/feedback/BubbleBox.vue'

用法

基本用法

气泡框支持上、下、左、右四个方向的显示位置。

<template>
  <FlexCol align="center" :gap="20">
    <BubbleBox :items="items">
      <Button>上方显示</Button>
    </BubbleBox>
    <FlexRow justify="space-between" :gap="20">
      <BubbleBox :items="items" position="left">
        <Button>左侧显示</Button>
      </BubbleBox>
      <BubbleBox :items="items" position="right">
        <Button>右侧显示</Button>
      </BubbleBox>
    </FlexRow>
    <BubbleBox :items="items" position="bottom">
      <Button>下方显示</Button>
    </BubbleBox>
  </FlexCol>
</template>

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { toast } from '@/components/dialog/CommonRoot';

const items = [
  {
    icon: 'edit-filling',
    text: '编辑',
    onClick: () => {
      toast('点击了编辑');
    },
  },
  {
    icon: 'browse',
    text: '查看',
    onClick: () => {
      toast('点击了查看');
    },
  },
]
</script>

自定义内容

通过 content 插槽可以自定义气泡框的内容，替代默认的按钮列表。

<template>
  <BubbleBox>
    <Button>点击显示自定义内容</Button>
    <template #content>
      <FlexCol :padding="[5, 10]" :gap="5">
        <Text bold>自定义标题</Text>
        <Text color="text.secondary" :size="24">这是通过 content 插槽自定义的气泡框内容，可以放置任意内容。</Text>
      </FlexCol>
    </template>
  </BubbleBox>
</template>

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
</script>

API 参考

BubbleBox

气泡框组件，用于在页面上显示一个可交互的气泡框。

Props

名称	说明	类型	必填	默认值
position	气泡框位置	'left' | 'right' | 'top' | 'bottom'	-	'top'
crossPosition	气泡在横轴上的对齐位置	'left' | 'center' | 'right'	-	'center'
trigger	触发点击事件模式	'click' | 'hover' | 'none'	-	'click'
direction	气泡框按钮排列方向	'column' | 'row'	-	'column'
disabled	是否禁用	boolean	-	false
items	气泡框按钮数组	BubbleBoxItem[]	-	[]
itemTextColor	气泡框按钮文本颜色	string	-	'text.content'
itemTextProps	气泡框按钮文本样式	TextProps	-	-
itemIconProps	气泡框按钮图标样式	IconProps	-	-
itemProps	气泡框按钮样式	FlexProps	-	-
outerStyle	气泡框外层容器样式	Record<string, string>	-	-
backgroundColor	气泡框背景颜色	string	-	'white'
arrowWidth	气泡框箭头宽度	number	-	12
radius	气泡框圆角半径	number	-	12
innerProps	气泡框内层容器样式	FlexProps	-	-
innerStyle	气泡框内层容器样式	Record<string, string>	-	-

BubbleBoxItem

气泡框按钮项的类型定义：

名称	说明	类型	必填	默认值
text	按钮文本	string	是	-
textColor	按钮文本颜色	string	-	-
icon	按钮图标	string	-	-
iconProps	按钮图标样式	IconProps	-	-
onClick	点击事件回调	() => void	是	-

Slots

名称	说明
default	气泡框的触发元素
content	自定义气泡框内容，替代默认的按钮列表

Methods

名称	说明	参数
show	显示气泡框	-
hide	隐藏气泡框	-

主题变量

名称	类型	默认值	说明
BubbleBoxArrowWidth	number	12	气泡框箭头宽度
BubbleBoxItemTextColor	string	'text.content'	气泡框按钮文本颜色
BubbleBoxBackgroundColor	string	'white'	气泡框背景颜色
BubbleBoxRadius	number	12	气泡框圆角半径