VueChat

Appearance

Bubble 对话气泡 ​

用于聊天的气泡组件。

介绍 ​

Bubble 组件常用于对话界面的构建。

基础用法 ​

hello world!
基础用法
Bubble 组件的基础用法
<template>
    <Bubble content="hello world!" />
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
</script>

<style scoped></style>

透明背景 ​

使用 transparent 设置气泡的背景是否透明。

hello world!
透明背景
Bubble 组件的透明背景
<template>
  <Bubble content="hello world!" transparent />
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
</script>

<style scoped></style>

位置与头像 ​

使用 avatar 设置自定义头像，通过 placement 设置位置，提供了 start、end 两个选项。

AI hello!
hello world!
位置与头像
Bubble 组件的位置与头像
<template>
  <Bubble content="AI hello!" placement="start"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp" />
  <Bubble content="hello world!" placement="end"
    avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
</script>

<style scoped></style>

加载中 ​

使用 loading 属性控制加载状态。

点击切换：
加载中
Bubble 组件的加载中
<template>
  <div>
    点击切换：
    <ElSwitch v-model="isLoading" />
  </div>
  <Bubble content="hello world!" :loading="isLoading"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Bubble } from 'vue-chat-pro'
const isLoading = ref<boolean>(true)
</script>

<style scoped></style>

打字器 ​

使用 typing 属性控制加载状态。


h
打字器
Bubble 组件的打字器
<template>
  <el-button style="float: right" type="primary" @click="text += ' hello world!'">
    点击添加文本
  </el-button>
  <br />
  <Bubble :content="text" :typing="{ step: 1, interval: 50 }"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp">
  </Bubble>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Bubble } from 'vue-chat-pro'
const text = ref<string>('hello world！')
</script>

<style scoped></style>

自定义渲染 ​

使用 markdown-it 组件实现自定义渲染。

自定义渲染
Bubble 组件的自定义渲染
<template>
  <Bubble :content="text" typing
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    :message-render="msgRender" />
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
import markdownit from 'markdown-it'
const md = markdownit({ html: true })
const text = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`.trim()
const msgRender = (text: string) => md.render(text)
</script>

<style scoped></style>

变体 ​

使用 variant 属性设置气泡的样式变体。

variant: filled

variant: outlined

variant: shadow

variant: borderless
变体
Bubble 组件的变体
<template>
  <Bubble variant="filled"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    content="variant: filled" />
  <br />
  <Bubble variant="outlined"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    content="variant: outlined" />
  <br />
  <Bubble variant="shadow"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    content="variant: shadow" />
  <br />
  <Bubble variant="borderless"
    avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    content="variant: borderless" />
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
</script>

<style scoped></style>

形状 ​

使用 shape 设置气泡的形状。

hello round!

hello corner!
形状
Bubble 组件的形状
<template>
  <Bubble content="hello round!" shape="round" />
  <br />
  <Bubble content="hello corner!" shape="corner" />
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
</script>

<style scoped></style>

插槽 ​

使用 avatar、header、footer、loading 插槽来定义Bubble的样式。

自定义头部和尾部
我是头部
h
我是尾部

自定义头像和加载状态
我是头像
我是加载状态...
插槽
Bubble 组件的插槽
<template>
  <div style="display: flex; flex-direction: column;">
    <el-text class="mx-1" type="primary" size="large">自定义头部和尾部</el-text>
    <Bubble content="hello" :typing="{ step: 1, interval: 50 }" shape="corner"
      avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp">
      <template #header>我是头部</template>
      <template #footer>我是尾部</template>
    </Bubble>
    <br />
    <el-text class="mx-1" type="primary" size="large">自定义头像和加载状态</el-text>
    <Bubble content="hello" loading shape="corner">
      <template #avatar>我是头像</template>
      <template #loading>我是加载状态...</template>
    </Bubble>
  </div>
</template>

<script setup lang="ts">
import { Bubble } from 'vue-chat-pro'
</script>

<style scoped></style>

Bubble Attributes ​

属性说明类型默认值版本
avatar展示头像VNode | String-
content聊天内容VNode | String-
loading聊天内容加载状态boolean-
placement信息位置start | endstart
shape气泡形状round | corner-
styles语义化结构 style[Record<"avatar" | "content" | "footer" | "header", CSSProperties>]-
typing设置聊天内容打字动画boolean | { step?: number, interval?: number }false
variant气泡样式变体filled | borderless | outlined | shadowfilled
loadingRender自定义渲染加载态内容() => VNode-
messageRender自定义渲染内容(content?: string) => VNode-
onTypingComplete打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发() => void-
onUpdate内容更新时会触发() => void--
transparent气泡背景是否透明booleanfalse-

Bubble Slot ​

插槽名说明类型
avatar头像-
header头部面板-
footer底部内容-
loadingloading-