引入组件

局部引入

const FBubblePopup = defineAsyncComponent(() => import('@/components/formaui/f-bubble-popup/f-bubble-popup.vue'))

基础用法

使用 v-model 控制显隐，默认插槽自定义气泡内容。点击遮罩关闭并触发 close 事件。

<f-button @click="show = true">打开气泡</f-button>
<f-bubble-popup
  v-model="show"
  top="280rpx"
  left="60rpx"
  triangle-direction="top"
  triangle-left="48rpx"
  triangle-top="-22rpx">
  <view>气泡内容</view>
</f-bubble-popup>

三角方向

triangleDirection属性：三角朝向，可选 top | bottom | left | right（默认top）

配合 triangleLeft / triangleRight / triangleTop / triangleBottom 调整三角位置。

<f-bubble-popup
  v-model="show"
  bottom="320rpx"
  triangle-direction="bottom"
  triangle-left="48rpx"
  triangle-bottom="-22rpx">
  <view>内容</view>
</f-bubble-popup>

定位与样式

position属性：定位方式 relative | absolute | fixed（默认fixed）

left / right / top / bottom / translateX / translateY：气泡位置

width / borderRadius / bgColor / textColor / boxShadow：尺寸与外观

<f-bubble-popup v-model="show" is-flex-end right="40rpx" top="200rpx" width="260rpx" bg-color="#5677fc">
  <view>右对齐气泡</view>
</f-bubble-popup>

遮罩

isMask属性：是否显示遮罩（默认true）

maskColor属性：遮罩颜色（默认rgba(0, 0, 0, 0.4)）

<f-bubble-popup v-model="show" :is-mask="false" top="200rpx" left="60rpx">
  <view>无遮罩</view>
</f-bubble-popup>

插槽

名称	说明
default	气泡内容

属性

属性名	类型	说明	默认值
v-model	boolean	是否显示	false
width	string	宽度	300rpx
borderRadius	string	圆角	8rpx
left	string	定位 left	auto
right	string	定位 right	auto
top	string	定位 top	auto
bottom	string	定位 bottom	auto
translateX	string	水平偏移	0
translateY	string	垂直偏移	0
bgColor	string	背景色	#4c4c4c
textColor	string	文字颜色	#ffffff
triangleBorderWidth	string	三角边宽	12rpx
triangleDirection	'top' | 'bottom' | 'left' | 'right'	三角方向	top
triangleLeft	string	三角 left	auto
triangleRight	string	三角 right	auto
triangleTop	string	三角 top	auto
triangleBottom	string	三角 bottom	auto
position	'relative' | 'absolute' | 'fixed'	定位方式	fixed
isFlexEnd	boolean	容器 flex-end	false
isMask	boolean	是否显示遮罩	true
maskColor	string	遮罩颜色	rgba(0, 0, 0, 0.4)
boxShadow	string	阴影	''

事件

事件名	说明	回调参数
close	点击遮罩关闭时	-