BubbleTip 气泡提示

介绍

在元素旁边弹出一段文字提示，常用于功能引导或简短说明。基于 BubbleBox 封装，继承其全部属性，同时提供了文字内容、关闭按钮等便捷配置。

导入

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

用法

基础用法

通过 v-model:show 控制显示隐藏，content 设置提示文本。

<template>
  <BubbleTip v-model:show="show" content="这是一个气泡提示" trigger="none">
    <Button @click="show = !show">{{ show ? '隐藏' : '显示' }}提示</Button>
  </BubbleTip>
</template>

<script setup>
import { ref } from 'vue';
import BubbleTip from '@/components/feedback/BubbleTip.vue';
import Button from '@/components/basic/Button.vue';

const show = ref(true);
</script>

不同方向

通过 position 设置气泡提示的弹出方向，支持 top、bottom、left、right。

<template>
  <BubbleTip v-model:show="show1" content="上方提示" position="top" trigger="none">
    <Button @click="show1 = !show1">上方</Button>
  </BubbleTip>
  <BubbleTip v-model:show="show2" content="左侧提示" position="left" trigger="none">
    <Button @click="show2 = !show2">左侧</Button>
  </BubbleTip>
  <BubbleTip v-model:show="show3" content="右侧提示" position="right" trigger="none">
    <Button @click="show3 = !show3">右侧</Button>
  </BubbleTip>
  <BubbleTip v-model:show="show4" content="下方提示" position="bottom" trigger="none">
    <Button @click="show4 = !show4">下方</Button>
  </BubbleTip>
</template>

<script setup>
import { ref } from 'vue';
import BubbleTip from '@/components/feedback/BubbleTip.vue';
import Button from '@/components/basic/Button.vue';

const show1 = ref(true);
const show2 = ref(true);
const show3 = ref(true);
const show4 = ref(true);
</script>

点击事件

监听 contentClick 事件可以在用户点击提示内容时执行操作。点击后提示会自动关闭。

<template>
  <BubbleTip
    v-model:show="show"
    content="点击我试试"
    trigger="none"
    @contentClick="onContentClick"
  >
    <Button @click="show = true">显示可点击提示</Button>
  </BubbleTip>
</template>

<script setup>
import { ref } from 'vue';
import BubbleTip from '@/components/feedback/BubbleTip.vue';
import Button from '@/components/basic/Button.vue';
import { toast } from '@/components/dialog/CommonRoot';

const show = ref(true);

function onContentClick() {
  toast('点击了提示内容');
}
</script>

无关闭按钮

设置 closeButton 为空字符串可隐藏关闭按钮。

<template>
  <BubbleTip v-model:show="show" content="没有关闭按钮的提示" closeButton="" trigger="none">
    <Button @click="show = !show">{{ show ? '隐藏' : '显示' }}</Button>
  </BubbleTip>
</template>

<script setup>
import { ref } from 'vue';
import BubbleTip from '@/components/feedback/BubbleTip.vue';
import Button from '@/components/basic/Button.vue';

const show = ref(true);
</script>

API 参考

BubbleTip

气泡提示组件，继承 BubbleBox 的所有属性。

Props

名称	说明	类型	必填	默认值
show (v-model)	是否显示气泡提示	boolean	-	false
content	提示文本内容	string	-	''
contentTextProps	提示文本的自定义属性	TextProps	-	{ color: 'white', fontConfig: 'contentText' }
closeButton	关闭按钮图标名称，设为空字符串隐藏	string	-	'close'
closeButtonProps	关闭按钮的自定义属性	IconButtonProps	-	{ size: 26, color: 'white' }
backgroundColor	气泡背景颜色	string	-	'rgba(0,0,0,0.9)'
radius	气泡圆角半径	number	-	10
position	气泡位置（继承自 BubbleBox）	'left'|'right'|'top'|'bottom'	-	'top'
trigger	触发模式（继承自 BubbleBox）	'click'|'hover'|'none'	-	'click'
...	其他属性继承自 BubbleBox	-	-	-

Events

名称	说明	参数
update:show	显示状态变化事件	boolean
contentClick	提示内容被点击	-
close	关闭按钮被点击	-

Slots

名称	说明
default	气泡提示的触发元素