跳到主要内容

消息列表组件

消息列表组件 message-list 负责显示用户收发的消息。目前支持展示的消息类型包括:

  • 普通消息:文本、引用
  • 媒体消息(支持自定义点击事件):图片、文件、小视频、富文本、高质量语音。图片消息默认展示缩略图,如需查看大图可通过监听 tapMessage 事件来实现。

点击会话列表中的会话,将进入会话页面。在会话页面可发送消息。

conversation(width=550)

提示

Web 端不具备持久化的数据存储能力,无法在本地持久化存储历史消息记录与会话列表,因此需要从融云服务端获取数据。从远端获取单群聊历史消息要求您已在控制台 IM 服务管理页面为当前使用的 App Key 开启单群聊消息云端存储服务。IM 旗舰版IM 尊享版可开通该服务。具体功能与费用以融云官方价格说明页面及计费说明文档为准。开通 30 分钟后生效,如果 App Key 未开通,则 IMKit 无法从融云服务端获取会话。

组件用法

导入 IMKit 时,请通过 IMKit 的 defineCustomElements() 统一引入所有组件。Vue 项目需要添加过滤自定义组件配置,详见导入 SDK

import * as RongIMLib from '@rongcloud/imlib-next'
// imkit 为核心模块
import { defineCustomElements, imkit } from '@rongcloud/imkit'

defineCustomElements()

按上述方式引入组件后,您可以直接使用 message-list

属性列表

下面列出了 message-list 组件的属性。

属性名称类型描述
base-sizestring设置组件大小,接受以 px 为单位的数字或百分比(根据父级 font-size 百分比),例如 18px、62.5%。默认值:16px。
customMenu{name: (message: IAReceivedMessage) => string, callback: (message: IAReceivedMessage) => any }[];应用程序在消息右键菜单中添加的自定义功能。要求 IMKit SDK ≧ 5.3.0。
disableMenuDisabledMessageContextMenu[]应用程序在消息右键菜单中隐藏的 IMKit 预置功能。要求 IMKit SDK ≧ 5.6.0。
forwardList{callback: (message: IAReceivedMessage) => IConversationOption[] };转发消息的目标会话。要求 IMKit SDK ≧ 5.3.0。
maxRecallDurationnumber消息撤回的最大有效期,单位为 s,默认值:120s。要求 IMKit SDK ≧ 5.6.0。

组件样式

提示

如不设置 div 样式,会导致消息列表无法滚动或其他异常。

使用 message-list 组件时,必须将组件包裹在 div 元素,并通过 div 的样式控制组件的宽高等样式。

<template>
<div class="chat-massage-list">
<message-list ref="messageList" base-size="10px"></message-list>
</div>
</template>

<style scoped>
.chat-massage-list {
height: calc(100% - 220px);
}
</style>

事件处理

事件名称返回值描述
tapMessageevent点击图片、文件消息触发监听事件,可处理业务层相关操作,例如:查看大图或文件下载。默认值:null
提示

以下示例代码以 Vue 框架为例。

<template>
<div class="chat-massage-list">
<message-list ref="messageList" base-size="10px"></message-list>
</div>
</template>

<script>
// Vue 代码
export default {
mounted() {
const messageList = this.$refs.messageList;
//添加点击消息触发监听
messageList.addEventListener("tapMessage", this.handleTapMessage);
},
beforeUnmount() {
// 注意:需要 removeEventListener 防止多次绑定造成异常
const messageList = this.$refs.messageList;
messageList.removeEventListener("tapMessage", this.handleTapMessage);
},
methods| {
handleTapMessage(e) {
const data = e.detail;
// 处理点击查看大图或文件消息下载等功能
console.log("点击消息触发监听:",data)
}
}
}
</script>

<style scoped>
.chat-massage-list {
height: calc(100% - 220px);
}
</style>

自定义消息右键菜单

IMKit SDK 消息右键菜单默认提供以下功能选项:

  1. 删除消息
  2. 引用消息
  3. 转发消息(需要 App 侧提供转发目标用户的信息)
  4. 撤回消息,消息撤回操作仅支持撤回己方发送消息。从 5.6.0 开始,限制消息发送后固定时长内(默认 120 秒)可撤回。过期后撤回按钮自动隐藏。

应用程序可以自定义 IMKit 的消息右键菜单,具体支持以下操作:

  • 添加自定义功能按钮。例如,您可以自行实现消息收藏、消息设置为公告等功能。
  • 移除 IMKit 预置功能按钮,例如转发、撤回等功能按钮。

添加自定义消息右键菜单选项

提示

IMKit 5.3.0 版本开始支持该功能。

IMKit 支持在消息的右键菜单中添加自定义功能按钮。您可以在业务侧自行实现并添加消息收藏、消息设置为公告等功能选项。

// 拿到消息列表组件
const messageList = this.$refs.messageList;

const messageCustomMenu = [{
name: function (message) {
// 可通过添加判断条件给特定的消息增加按钮,下方示例为:给非文本类型消息添加 '自定义' 按钮
if(message.messageType !== 'RC:TxtMsg')
return '自定义'
},
callback: function (message) {
console.info('点击自定义按钮拿到消息:', JSON.stringify(message))
}
}]

messageList.customMenu = messageCustomMenu;

隐藏消息右键菜单选项

提示

IMKit 5.5.1 版本开始支持该功能。

默认情况下,IMKit 会展示所有预置功能按钮。应用程序可以按需隐藏预置功能按钮。

// 引入消息右键菜单按钮枚举
import { DisabledMessageContextMenu } from "@rongcloud/imkit";
// 拿到消息列表组件
const messageList = this.$refs.messageList;

// 示例:隐藏转发按钮
const disableMenu = [DisabledMessageContextMenu.Forward];

messageList.disableMenu = disableMenu;

设置撤回时间限制

提示

IMKit 5.6.0 版本开始支持该功能。IMKit 在 5.6.0 版本以前对于撤回消息并没有做时间限制,现在主流的社交软件都会进行撤回时间限制,建议开发者自行做撤回时间限制。

IMKit 默认提供消息撤回功能,撤回按钮默认有效期为 120s。默认时间不满足需求时可通过设置消息组件中的 maxRecallDuration 属性。过期后撤回按钮自动隐藏。

// 拿到消息列表组件
const messageList = this.$refs.messageList;

// maxRecallDuration 设置单位为s,示例中设置为 120 秒。发送时间超过 120s 的消息将不可被撤回。设置为 0 时使用默认值。
messageList.maxRecallDuration = 120;