Bubble 聊天气泡

气泡用于聊天与对话场景，承载一段消息内容。组件默认主色调，可切换为白色，并支持左右对齐与自定义插槽内容。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-bubble 的用法，可按需组合。

<template>
  <mu-bubble text="这是一条主色调气泡"></mu-bubble>
</template>

风格

设置气泡风格，可选 primary、white，默认主色调。

<mu-bubble variant="white" text="这是一条白色气泡"></mu-bubble>

对齐

设置气泡的对齐方向，可选 left、right。

<mu-bubble variant="white" text="默认左对齐"></mu-bubble>
<mu-bubble variant="primary" align="right" text="右对齐气泡"></mu-bubble>

自定义内容

通过默认插槽自定义气泡内容，与 text 同时存在时一并渲染。

<mu-bubble variant="white">
  <text class="bubble-text">插槽可自定义任意内容</text>
</mu-bubble>
<mu-bubble variant="primary" align="right">
  <text class="bubble-text">{{ "支持多行\n换行显示" }}</text>
</mu-bubble>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
variant	气泡风格，可选 primary、white	string	primary
align	气泡对齐方向，可选 left、right	string	left
text	气泡文本内容	string	-
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击气泡时触发	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
default	自定义气泡内容，与 text 同时存在时一并渲染