VueChat

Appearance

Conversation 管理对话 ​

用于记录用户发送的历史对话列表。

介绍 ​

Conversations 是一个基于 Vue 3 和 Element Plus 开发的会话管理组件，支持分组展示、菜单交互、自定义样式等功能。适用于消息列表、任务分组等场景，通过灵活的配置和插槽扩展，满足多样化的业务需求。

基础用法 ​

  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
基础用法
Conversation 组件的基础用法
<template>
  <Conversation v-model:active-key="activeKey" :items="items" style="width: 300px" />
</template>

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

const items = Array.from({ length: 4 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
  disabled: index === 3,
}))
const activeKey = ref('item1')
</script>

<style scoped></style>

添加菜单 ​

配合 menu 属性，实现添加操作菜单

  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
添加菜单
Conversation 组件的添加菜单
<template>
  <Conversation v-model:active-key="activeKey" :items="items" style="width: 300px" :menu="menuConfig" />
</template>

<script setup lang="ts">
import { Conversation } from 'vue-chat-pro'
import type { ConversationProps } from 'vue-chat-pro/types'
import { AddLocation, Aim, AlarmClock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const items = Array.from({ length: 4 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
  disabled: index === 3,
  group: index === 3 ? '工作' : '学习',
}))
const activeKey = ref('item1')

const menuConfig: ConversationProps['menu'] = () => ({
  items: [
    {
      label: 'Operation 1',
      icon: AddLocation,
      command: 'command1',
    },
    {
      label: 'Operation 2',
      icon: Aim,
      command: 'command2',
      disabled: true,
    },
    {
      label: 'Operation 3',
      icon: AlarmClock,
      command: 'command3',
    },
  ],
  onClick: (e) => {
    ElMessage.info(`You clicked ${e.label} - ${e.key}`)
  },
})
</script>

<style scoped></style>

分组 ​

配合 groupable 属性，实现分组展示(同时可以自定义sort函数实现自定义分组)

  • 学习
    • Conversation Item 1
    • Conversation Item 2
    • Conversation Item 3
  • 工作
    • Conversation Item 4
分组
Conversation 组件的分组
<template>
  <Conversation v-model:active-key="activeKey" :items="items" style="width: 300px" :menu="menuConfig"
    :groupable="groupableConfig" />
</template>

<script setup lang="ts">
import { Conversation } from 'vue-chat-pro'
import type { ConversationProps } from 'vue-chat-pro/types'
import { AddLocation, Aim, AlarmClock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const items = Array.from({ length: 4 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
  disabled: index === 3,
  group: index === 3 ? '工作' : '学习',
}))
const activeKey = ref('item1')

const menuConfig: ConversationProps['menu'] = () => ({
  items: [
    {
      label: 'Operation 1',
      icon: AddLocation,
      command: 'command1',
    },
    {
      label: 'Operation 2',
      icon: Aim,
      command: 'command2',
      disabled: true,
    },
    {
      label: 'Operation 3',
      icon: AlarmClock,
      command: 'command3',
    },
  ],
  onClick: (e) => {
    ElMessage.info(`You clicked ${e.label} - ${e.key}`)
  },
})

const groupableConfig: ConversationProps['groupable'] = {
  sort: (a, b) => {
    const order: Record<string, number> = { 学习: 0, 工作: 1 }
    const orderA = order[a] !== undefined ? order[a] : 999
    const orderB = order[b] !== undefined ? order[b] : 999
    return orderA - orderB
  }
}
</script>

<style scoped></style>

Conversation Attributes ​

属性说明类型默认值版本
v-model:activeKey当前选中的值string--
defaultActiveKey默认选中值string--
items会话列表数据源Conversation[]--
onActiveChange选中变更回调(value: string) => void--
menu会话操作菜单MenuProps | ((value: Conversation) => MenuProps)--
groupable是否支持分组, 开启后默认按 Conversation.group 字段分组boolean | GroupableProps--
styles语义化结构 styleRecord<'item', CSSProperties>--
classNames语义化结构 classNameRecord<'item', string>--

Conversation ​

属性说明类型默认值版本
key唯一标识string--
label会话名称VNode | string--
timestamp会话时间戳number--
group会话分组类型，与 ConversationsProps.groupable 联动string--
icon会话图标VNode | string--
disabled是否禁用boolean--

GroupableProps ​

属性说明类型默认值版本
sort分组排序函数(a: string, b: string) => number--