BubbleList 对话列表

用于承载 Bubble 组件的列表。

介绍

BubbleList 组件常用于对话界面的列表。

基础用法

Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content!

M

基础用法

BubbleList 组件的基础用法

<template>
  <div style="margin-bottom: 30px;">
    <el-button @click="handleClick" type="primary">添加AI消息</el-button>
    <el-button @click="handleTop">滚动到顶部</el-button>
  </div>
  <BubbleList ref="bubbleListRef" :items="items" style="height: 200px;overflow: auto;" />
</template>

<script setup lang="ts">
import { BubbleList } from 'vue-chat-pro'
import { reactive, ref } from 'vue';
import type { BubbleDataType } from 'vue-chat-pro/types'
const items = reactive<BubbleDataType[]>([
  {
    role: 'user',
    content: 'Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! ',
    headerProps: 'user头部',
    key: 'perset_user_1',
  },
  {
    role: 'ai',
    content: 'Mock Ai content! Mock Ai content! Mock Ai content! ',
    headerProps: 'ai头部',
    placement: 'start',
    avatar: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
    typing: { step: 5, interval: 20 },
    key: 'perset_ai_1',
  },
])

const bubbleListRef = ref<InstanceType<typeof BubbleList>>()
const handleClick = () => {
  items.push({
    role: 'ai',
    content: 'Mock Ai content! Mock Ai content! Mock Ai content! Mock Ai content! Mock Ai content! Mock Ai content! Mock Ai content! Mock Ai content! ',
    headerProps: 'ai头部',
    placement: 'start',
    avatar: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
    typing: { step: 5, interval: 20 },
    key: 'perset_ai_' + (items.length + 1),
  })
}
const handleTop = () => {
  bubbleListRef.value?.scrollTo({
    key: 0,
    block: 'nearest',
  })
}
</script>

<style scoped lang="scss"></style>

自定义对话列表

通过调整items加载定制，调整气泡效果。

Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content!

Custom loading...

自定义对话列表

BubbleList 组件的自定义对话列表

<template>
  <BubbleList ref="bubbleListRef" :items="items" style="height: 200px;overflow: auto;">
  </BubbleList>
</template>

<script setup lang="ts">
import { BubbleList } from 'vue-chat-pro'
import { reactive, ref, h } from 'vue';
import type { BubbleDataType } from 'vue-chat-pro/types'
const items = reactive<BubbleDataType[]>([
  {
    role: 'user',
    content: 'Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! Mock User content! ',
    headerProps: 'user头部',
    key: 'perset_user_1',
  },
  {
    role: 'ai',
    content: 'Mock Ai content! Mock Ai content! Mock Ai content! ',
    headerProps: 'ai头部',
    placement: 'start',
    avatar: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
    typing: { step: 5, interval: 20 },
    loadingRender: () => h('div', { style: { color: 'red' } }, 'Custom loading...'),
    key: 'perset_ai_1',
    loading: true,
  },
])

const bubbleListRef = ref<InstanceType<typeof BubbleList>>()
</script>

<style scoped lang="scss"></style>

BubbleList Attributes

属性	说明	类型	默认值	required
autoScroll	当内容更新时，自动滚动到最新位置。	boolean	true
items	Bubble 数据列表	(BubbleProps & { key: string | number, role?: string })[]	-	true

BubbleList Slots

插槽名	说明	类型
avatar	头像	-
header	头部面板	-
footer	底部内容	-
loading	loading 占位	-
content	内容	-