跳到主要内容

会话列表组件

会话列表组件 conversation-list 显示当前用户当前用户的会话列表。客户端应用程序必须连接到融云服务器，才可以显示会话列表。

newConversation(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()

按上述方式引入组件后，您可以直接使用 conversation-list。

属性列表​

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

属性名称类型描述
baseSizestring设置组件大小，接受以 px 为单位的数字或百分比（根据父级 font-size 百分比），例如 18px、62.5%。默认值：16px。
customMenu{ name: (conversation: IConversationOption) => string; callback: (conversation: IConversationOption) => any; }[]应用程序在会话右键菜单中添加的自定义功能。要求 IMKit SDK ≧ 5.3.0。
disableMenuDisabledConversationontextMenu[]应用程序在会话右键菜单中隐藏的 IMKit 预置功能。要求 IMKit SDK ≧ 5.5.1。
hideNotificUnreadCountboolean是否隐藏未读数数字，只显示小红点。该功能只针对免打扰状态下的会话生效。非免打扰状态下的会话正常显示会话未读数。要求 IMKit SDK ≧ 5.6.4。详见未读消息数。

组件样式​

提示

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

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

<template>
  <div class="chat-conversation">
    <conversation-list ref="conversationList" base-size="10px" />
  </div>
</template>

//

<style scoped>
.chat-conversation {
  float: left;
  width: 30vw;
  height: 100%;
}
</style>

事件处理​

事件名称返回值描述
updateConversation会话条目被更新。
tapConversation会话条目被点击。
deleteConversation会话条目被删除。
提示

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

<template>
  <div class="chat-conversation">
    <conversation-list ref="conversationList" base-size="10px" />
  </div>
</template>

<script>
// Vue 代码
export default {
  mounted() {
    const conversationList = this.$refs.conversationList;

    //添加点击会话监听
    conversationList.addEventListener(
      "tapConversation",
      this.handleTapConversation //回调处理函数
    );
    //添加删除会话监听
    conversationList.addEventListener(
      "deleteConversation",
      this.handleDeleteConversation //回调处理函数
    )
  },
  beforeUnmount() {
    // 注意：需要 removeEventListener 防止多次绑定造成异常
    const conversationList = this.$refs.conversationList;

    conversationList.removeEventListener("tapConversation", this.handleTapConversation);

    conversationList.removeEventListener("deleteConversation", this.handleDeleteConversation);
  },
  methods: {
    handleTapConversation() {
      //处理点击会话后的操作
      console.info('处理点击会话后的操作');
    },
    handleDeleteConversation(){
      //处理删除会话后的操作
      console.info('处理点击会话后的操作');
    }
  }
}
</script>

<style scoped>
.chat-conversation {
  float: left;
  width: 30vw;
  height: 100%;
}
</style>

自定义会话右键菜单​

IMKit SDK 会话右键菜单默认已提供会话置顶、免打扰、删除会话等功能。为满足更多客户个性化业务需求，IMKit 支持自定义会话右键菜单。

  • 添加自定义功能按钮，您可以在业务侧自行实现并添加拉黑、删除好友等功能选项。
  • 移除 IMKit 预置功能按钮，包括置顶、删除、免打扰功能。

添加自定义会话右键菜单选项​

提示

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

应用程序可以使用 conversationList 组件的 conversationCustomMenu 属性添加自定义功能选项。

// 拿到会话列表组件
const conversationList = this.$refs.conversationList;

const conversationCustomMenu = [{
  name: function (conversation) {
    return '自定义按钮'
  },
  callback: function (conversation) {
    // 通过 callback 拿到点击动作后进行业务处理
    console.info('点击自定义按钮拿到会话:', JSON.stringify(conversation))
  }
}]

conversationList.customMenu = conversationCustomMenu

隐藏预置会话菜单按钮​

提示

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

应用程序可以使用 conversationList 组件的 disableMenu 属性隐藏 IMKit SDK 会话右键菜单默认已提供的会话置顶、免打扰、删除会话功能按钮。

提示

置顶功能与免打扰功能均提供的一组按钮，设置隐藏功能按钮后，所有相关按钮都会被隐藏。例如，设置隐藏会话免打扰功能按钮后，IMKit 页面上将隐藏“免打扰”和“取消免打扰”按钮。

// 引入会话按钮枚举
import { DisabledConversationontextMenu } from "@rongcloud/imkit";
// 拿到会话列表组件
const conversationList = this.$refs.conversationList;

// 示例：隐藏会话置顶、会话免打扰、会话删除功能按钮，
const disableMenu = [DisabledConversationontextMenu.Top,DisabledConversationontextMenu.Notification,DisabledConversationontextMenu.Delete];

conversationList.disableMenu = disableMenu;

最后于 更新