# una-bubble

**Repository Path**: una_0903/una-bubble

## Basic Information

- **Project Name**: una-bubble
- **Description**: 对话框组件，可直接引入小程序中，或者通过Hbuilder直接引入
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-17
- **Last Updated**: 2026-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# una-bubble

`uni-app` 气泡组件，支持自定义内边距、宽高、颜色、文字/插槽内容，以及气泡三角形（尖角）的显示与方向。

## 特性

- 支持 `text` 文本模式，也支持默认插槽自定义内容
- 支持气泡样式自定义：`width`、`height`、`padding`、`backgroundColor`、`borderRadius`
- 支持三角形控制：是否显示、位置（`top` / `bottom` / `left` / `right`）
- 默认样式为浅灰圆角气泡，适合提示说明文案

## 基础用法

```vue
<template>
	<view>
		<una-bubble text="这是默认文字气泡" />

		<una-bubble
			:showTriangle="true"
			trianglePosition="bottom"
			triangleOffset="80rpx"
			backgroundColor="#EFEFEF"
			width="560rpx"
			padding="20rpx 24rpx"
		>
			<view>
				<text style="font-size: 26rpx; color: #333;">这里是插槽内容</text>
			</view>
		</una-bubble>
	</view>
</template>
```

## Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 文字内容（未传插槽时展示） | String | `这里是气泡内容` |
| width | 气泡宽度 | String / Number | `620rpx` |
| height | 气泡高度（空表示自适应） | String / Number | `''` |
| padding | 内边距 | String / Number | `24rpx 28rpx` |
| backgroundColor | 气泡背景色 | String | `#F5F6F7` |
| borderRadius | 圆角 | String / Number | `20rpx` |
| color | 文本颜色 | String | `#666666` |
| fontSize | 字号 | String / Number | `28rpx` |
| contentAlign | 文本对齐方式：`left` / `center` / `right` | String | `left` |
| showTriangle | 是否显示三角形 | Boolean | `true` |
| trianglePosition | 三角形方向：`top` / `bottom` / `left` / `right` | String | `top` |
| triangleSize | 三角形大小 | String / Number | `14rpx` |
| triangleOffset | 三角形偏移（`top/bottom` 时从左侧偏移，`left/right` 时从顶部偏移） | String / Number | `40rpx` |

## 插槽

- 默认插槽：自定义气泡内容
- 未使用插槽时，组件展示 `text`