聊天对话组件

使用说明

聊天对话组件主要用于业务中展示聊天对话信息，支持文本、图片等多种消息类型的展示。 提供完整的聊天界面交互功能，包括消息发送、接收、状态显示等。

支持功能点

• 支持文本消息展示
• 支持图片消息展示和预览
• 支持消息发送状态显示
• 支持消息时间显示
• 支持发送者和接收者信息展示
• 支持消息气泡样式自定义
• 支持图片加载状态显示
• 支持消息列表自动滚动
• 支持响应式布局
• 支持多种设备标识显示
• 支持聊天专注模式切换
• 支持输入区域高度调节
• 支持只读模式

综合示例

loading

数据格式

关键数据详细说明

针对所需要的关键参数的数据格式进行详细描述，以便于开发人员能够更好的理解和使用。

消息数据格式：props.messages

[
  {
    "id": "1232323453545",
    "content": "医生，您好，我最近感觉有些不舒服！",
    "time": "2025-05-23 10:00",
    "type": "text",
    "currentUserId": "1910594595277893632",
    "sender": {
      "userId": "1919652661519732733",
      "userName": "LMX",
      "sex": 1,
      "device": ["WX"]
    },
    "receiver": {
      "userId": "1910594595277893632",
      "userName": "ZQQ",
      "sex": 1,
      "device": ["PC"]
    }
  },
  {
    "id": "343545465656",
    "content": "https://picsum.photos/800/700",
    "time": "2025-05-24 11:10",
    "type": "img",
    "currentUserId": "1910594595277893632",
    "sender": {
      "userId": "1919652661519732733",
      "userName": "LMX",
      "sex": 1
    },
    "receiver": {
      "userId": "1910594595277893632",
      "userName": "ZQQ",
      "sex": 1
    }
  }
]

发送者信息格式：props.sender

{
  userId: '1910594595277893632', // 发送者用户ID
  userName: 'LMX', // 发送者用户名
  device: ['PC'], // 设备类型数组
}

接收者信息格式：props.receiver

{
  userId: '1919652661519732733', // 接收者用户ID
  userName: 'ZQQ', // 接收者用户名
  device: ['WX'], // 设备类型数组：PC|WX|APP等
}

基础用法

基础使用示例

展示聊天组件的基本用法和参数配置。

<template>
  <l-chat-manage
    ref="chatRef"
    :messages="messages"
    :sender="sender"
    :receiver="receiver"
    :userId="userId"
    :readonly="false"
    :auto-scroll="true"
    @send-message="handleSendMessage"
    @upload-image="handleUploadImage"
  />
</template>

<script setup>
import { ref } from 'vue';

const chatRef = ref();
const messages = ref([
  {
    id: '1232323453545',
    content: '医生，您好，我最近感觉有些不舒服！',
    time: '2025-05-23 10:00',
    type: 'text',
    currentUserId: '1910594595277893632',
    sender: {
      userId: '1919652661519732733',
      userName: 'LMX',
      sex: 1,
      device: ['WX'],
    },
    receiver: {
      userId: '1910594595277893632',
      userName: 'ZQQ',
      sex: 1,
      device: ['PC'],
    },
  },
]);

const sender = {
  userId: '1910594595277893632',
  userName: '李荣飞',
  device: ['PC'],
};

const receiver = {
  userId: '1919652661519732733',
  userName: '测试用户',
  device: ['WX'],
};

const userId = '1910594595277893632';

const handleSendMessage = (message) => {
  console.log('发送消息:', message);
};

const handleUploadImage = (imgInfo) => {
  console.log('上传图片:', imgInfo);
};

// 使用组件方法
const addNewMessage = (message) => {
  chatRef.value.addMessage(message);
};
</script>

消息类型

::: 支持的消息类型 目前组件支持以下消息类型，后续会根据业务需求扩展更多类型。 :::

文本消息

{
  type: 'text',
  content: '这是一条文本消息',
  // ...其他必需字段
}

图片消息

{
  type: 'img',
  content: 'https://example.com/image.jpg', // 图片URL
  uploading: false, // 是否正在上传
  // ...其他必需字段
}

注意

由于组件正在持续开发中，部分功能和参数可能会有调整，请关注版本更新说明。

相关类型定义

type MediaType = 'image' | 'voice' | 'video' | 'phrase';

// 发送者/接受者类型
interface SenderInfoType {
  userId: string;
  userName: string;
  patPicBase64?: string;
  sex?: string;
  device: Array<'PC' | 'WX'>;
}

// 消息体
interface MessageType {
  id: number;
  content: string | any;
  time: string;
  businessType?: string; // 当前业务类型：10-在线问诊；20-在线复诊
  hospitalId?: string; // 医院id
  type: 'text' | 'img' | 'voice' | 'video';
  uploading?: boolean;
  currentUserId: string; // 当前用户id，用于判断是否为自己发送的消息
  sender: SenderInfoType; // 发送者信息
  receiver: SenderInfoType; // 接收者信息
}

样式自定义

样式定制

组件提供了丰富的 CSS 变量和类名，支持主题定制和样式覆盖。

// 自定义气泡颜色
.chat-message-bubble {
  &.sent {
    background-color: #1890ff; // 发送消息气泡颜色
  }

  &.received {
    background-color: #f0f0f0; // 接收消息气泡颜色
  }
}

// 自定义图片消息样式
.img-message-bubble {
  :deep(.upload-img-info) {
    border-radius: 8px;

    &:hover {
      transform: scale(1.02);
    }
  }
}

// 专注模式样式
.chat-container.focus-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: white;
}

API

LChatManage 属性

参数	说明	类型	默认值	必需
readonly	是否为只读模式	Boolean	false	否
messages	消息列表数组	Array	[]	是
messagesLoading	消息加载状态	Boolean	false	否
showSelfMessage	是否显示自己发送的消息	Boolean	true	否
autoScroll	是否自动滚动到最新消息	Boolean	true	否
dividerMinutes	消息时间分隔线间隔（分钟）	Number	5	否
userId	当前用户 ID（用于判断消息方向）	String	''	是
sender	发送者信息对象	Object	{}	是
receiver	接收者信息对象	Object	{}	是
phrases	常用语数组	Array	[]	否

LChatManage 方法

方法名称	说明	参数	返回值
toggleFocusMode	切换聊天专注模式	-	void
addMessage	添加新消息	message: MessageType	void
updateMessage	更新已存在的消息	message: MessageType	void
getMessages	获取所有消息	-	Array
getMessageById	根据 ID 获取指定消息	id: string	Object
loadMessages	加载消息列表	messages: MessageType[]	void
resetMessages	重置消息列表	-	void
batchRenderMessages	批量渲染消息	messages: MessageType[]	void

LChatManage 事件

事件名称	说明	回调参数
send-message	发送消息时触发	message: MessageType
upload-image	上传图片时触发	imgInfo：Object
update-message	更新消息时触发	message：MessageType