前言

持续输出中～ 现在AI小助手很多，聊天（对话）气泡就经常开发着，写一个组件通用一下，欢迎大家使用后点评，有需要改善的地方请说出，后续会把开源代码发布出来。
本篇就是告诉大家如何引入使用的。

到 Uniapp 的插件市场，搜索 una-bubble
快速通道：https://ext.dcloud.net.cn/search?q=una-bubble

一、 插件介绍

1.✨ 特性

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

2. 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

3.插槽

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

二、插件使用示例

1. 下载路径

https://ext.dcloud.net.cn/plugin?id=27210

这个广告30s，相当于激励俺继续维护，大部分插件都是这么设置了，大家在观看的时候页面不要关闭，看完在手机上关闭广告，等待uni变更状态就行。
也可以选择 “赞赏插件跳过广告” 😁

手机端显示：
观看完毕后，点击关闭，等待状态文字变更，再关闭这个uni的小程序。

电脑端就会有个alert，是否运行打开Hbuilderx，点击允许，就跳到HbuilderX中了。选择你要导入的项目

tip： 可以只打开一个窗口，窗口内就一个项目，这样识别会好一些。
我再同一个窗口内，多开了几个项目，有几次没检测到，我又重新看了广告。

点击“确认”，查看此时在哪个目录里。
【注意】因为uniapp修改了传入的目录结构，我的项目结构为 components/una-bubble，若有冲突，保证自己的项目不被影响的前提下，点击忽略冲突，别替换了自己项目的文件

成功会有一个提示

2. 引入组件

1）方法一：放入uni_modules

在 uni_modules中新建一个目录una-bubble，将下载的 componets下的文件都放入这个目录中。如图：

2）放入components

可以删除无用的 文件，如package.json 、 README.md。

这里我留着是示例如果有同学需要看的话，就放入这个文件夹里，不然自己的其他组件多了之后不好管理文件。

3. 在微信小程序中的运行

案例对照：

• 默认气泡
• 无三角形
• 插槽气泡（气泡内容样式自定义）
• 三角形在下方，位置略居中
  

效果如图，具体代码如下：

<template>
	<view class="demo-page">
		<view class="demo-title">默认气泡</view>
		<una-bubble text="我是内容" />
		
		<view class="demo-title">无三角形</view>
		<una-bubble text="我是内容" :showTriangle="false" />
		
		<view class="demo-title">插槽气泡（气泡内容样式自定义）</view>
		<una-bubble>
			<template>
				<text>我是内容</text>
			</template>
		</una-bubble>
		
		<view class="demo-title">三角形在下方，位置略居中</view>
		<una-bubble 
			text="我是内容"
			backgroundColor="#FFF6E2"
			color="#383838"
			fontSize="32rpx"
			trianglePosition="bottom"
			triangleSize="20rpx"
			triangleOffset="200rpx"
			contentAlign="right"
		/>
	</view>
</template>

如果大家用着不错，可以动动手指打赏俺，有问题可以私信我，需要qq群维护也请留言，多的话，我再建群哦

三、其他插件文章

1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper

快速通道

2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框

快速通道

3.【Uniapp 插件 una-upload-resource 】上传资源组件｜ 图片上传｜视频上传｜混传

快速通道