TnBubbleBox-气泡弹框

该组件一般用在有附加选项的内容，点击内容时弹出的气泡弹框，比如点击一个商品时，弹出的气泡弹框中有加入购物车、收藏、分享等选项。

组件位置

nodeuni_modules

typescript

import TnBubbleBox from '@tuniao/tnui-vue3-uniapp/components/bubble-box/src/bubble-box.vue'

import TnBubbleBox from '@tuniao/tnui-vue3-uniapp/components/bubble-box/src/bubble-box.vue'

typescript

import TnBubbleBox from '@/uni_modules/tuniaoui-vue3/components/bubble-box/src/bubble-box.vue'

import TnBubbleBox from '@/uni_modules/tuniaoui-vue3/components/bubble-box/src/bubble-box.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过默认slot插槽来设置气泡弹框的内容

通过options设置气泡框的选项，通过选项的text设置文本内容，通过icon设置图标，通过textColor设置字体颜色，通过disabled设置禁止点击当前的选项，如果在选项中单独设置了disabled，则以选项中的disabled为准

nodeuni_modules

vue

<script lang="ts" setup>
import type { BubbleBoxOption } from '@tuniao/tnui-vue3-uniapp'

const bubbleOptions: BubbleBoxOption = [
  { text: '收藏', icon: 'star-fill' },
  { text: '分享', icon: 'share-triangle' },
]
</script>

<template>
  <TnBubbleBox :options="bubbleOptions">
    <view>点击弹出气泡框</view>
  </TnBubbleBox>
</template>

<script lang="ts" setup>
import type { BubbleBoxOption } from '@tuniao/tnui-vue3-uniapp'

const bubbleOptions: BubbleBoxOption = [
  { text: '收藏', icon: 'star-fill' },
  { text: '分享', icon: 'share-triangle' },
]
</script>

<template>
  <TnBubbleBox :options="bubbleOptions">
    <view>点击弹出气泡框</view>
  </TnBubbleBox>
</template>

vue

<script lang="ts" setup>
import type { BubbleBoxOption } from '@/uni_modules/tuniaoui-vue3'

const bubbleOptions: BubbleBoxOption = [
  { text: '收藏', icon: 'star-fill' },
  { text: '分享', icon: 'share-triangle' },
]
</script>

<template>
  <tn-bubble-box :options="bubbleOptions">
    <view>点击弹出气泡框</view>
  </tn-bubble-box>
</template>

<script lang="ts" setup>
import type { BubbleBoxOption } from '@/uni_modules/tuniaoui-vue3'

const bubbleOptions: BubbleBoxOption = [
  { text: '收藏', icon: 'star-fill' },
  { text: '分享', icon: 'share-triangle' },
]
</script>

<template>
  <tn-bubble-box :options="bubbleOptions">
    <view>点击弹出气泡框</view>
  </tn-bubble-box>
</template>

设置气泡框的位置

可以通过position设置气泡框的位置，可选值为top、bottom、left、right，默认为top。

注意

开发者在使用气泡框的时候注意页面预留的位置是否足够，否则气泡框会被遮挡

vue

<template>
  <TnBubbleBox :options="bubbleOptions" position="bottom">
    <view>点击弹出气泡框</view>
  </TnBubbleBox>
</template>

<template>
  <TnBubbleBox :options="bubbleOptions" position="bottom">
    <view>点击弹出气泡框</view>
  </TnBubbleBox>
</template>

气泡弹框的宽高信息

默认情况下，气泡弹框的宽高信息是根据内容自适应的，如果需要设置气泡弹框的宽高信息，可以通过width和height来设置，默认单位 rpx

如果设置的高度比内容高度低时，气泡弹框内的内容可以滚动

vue

<template>
  <TnBubbleBox
    :options="bubbleOptions"
    position="bottom"
    width="360"
    height="80"
  >
    <view>点击弹出气泡框</view>
  </TnBubbleBox>
</template>

<template>
  <TnBubbleBox
    :options="bubbleOptions"
    position="bottom"
    width="360"
    height="80"
  >
    <view>点击弹出气泡框</view>
  </TnBubbleBox>
</template>

API

Props

属性名	说明	类型	默认值	可选值
options	气泡弹框选项	BubbleBoxOption	[]	-
position	气泡弹框弹出位置	String	`top`	`bottom` \ `left` \ `right`
width	气泡弹框的宽度，默认单位 rpx	String	-	-
height	气泡弹框的高度，默认单位 rpx	String	-	-
bg-color	弹框背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
text-color	选项文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
option-item-padding	选项内边距	String	-	-
disabled	禁止选择选项	Boolean	`false`	`true`
auto-close	点击选项后自动关闭气泡框	Boolean	`true`	`false`
z-index	zIndex	Number	10020	-

Emits

事件名	说明	类型
open	气泡弹框打开触发事件	`() => void`
close	气泡弹框关闭触发事件	`() => void`
click	选项点击事件	`(index: number) => void`

BubbleBoxOption = BubbleBoxOptionItem[]

BubbleBoxOptionItem

属性名	说明	类型	默认值	可选值	必填
text	选项内容	String	-	-	是
icon	选项图标	String	-	图标有效值	否
textColor	选项文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-	否
disabled	禁止点击选项	Boolean	`false`	`true`	否

TnBubbleBox-气泡弹框 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

设置气泡框的位置 ​

气泡弹框的宽高信息 ​

API ​

Props ​

Emits ​

BubbleBoxOption = BubbleBoxOptionItem[] ​

BubbleBoxOptionItem ​