文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>即时通信 IM>聊天互动（含 UI）>自定义 UI 组件>自定义 UI 组件（Vue3）>Conversation List>ConversationPreview

ConversationPreview

最近更新时间：2025-09-12 18:14:52

我的收藏

本页目录：

概述

ConversationPreview 组件用于预览会话列表中的单个会话。它负责显示会话信息、未读数，并提供会话操作功能。
借助该组件，您可以自由地设计和组合出您所期望的 ConversationPreview 布局。此外，您还可以通过 @select-conversation 事件自定义选中会话时的行为。

自定义用法

您可以使用 ConversationList 的 Preview prop 来自定义会话列表中每个会话的预览项。如果未指定 Preview prop，系统将默认使用 ConversationPreviewUI 组件。
<template>
  <div class="custom-preview">
    <div class="content">
      <h4>Custom Preview</h4>
      <p>{{ conversation?.getShowName() }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';

interface Props {
  conversation?: ConversationModel;
}

const props = withDefaults(defineProps<Props>(), {});
</script>
<template>
  <ConversationList :preview="CustomConversationPreview" />
</template>

<script setup lang="ts">
import { ConversationList } from '@tencentcloud/chat-uikit-vue3';
import CustomConversationPreview from './CustomConversationPreview.vue';
</script>

Props

ConversationPreviewProps

参数名
类型
默认值
说明
conversation(Required)
ConversationModel
-
必选参数，标识当前渲染的会话列表项
isSelected
boolean
false
控制会话列表项 UI 是否处于选中状态
enableActions
boolean
true
控制会话操作功能是否显示
actionsConfig
ConversationActionsConfig
-
用于自定义会话操作配置
highlightMatchString
string
-
会话列表项 Title 高亮匹配关键词，常用于会话搜索结果高亮
Preview
Component
ConversationPreviewUI
自定义预览组件
Avatar
Component
Avatar
渲染会话列表项头像区域
ConversationActions
Component
ConversationActions
渲染会话列表项会话操作区域
className
string
-
指定根元素类的 CSS 自定义名称
style
CSSProperties
-
指定根元素样式的自定义样式

ConversationPreviewUIProps

参数名
类型
默认值
说明
conversation(Required)
ConversationModel
-
必选参数，标识当前渲染的会话列表项
isSelected
boolean
false
控制会话列表项 UI 是否处于选中状态
enableActions
boolean
true
控制会话操作功能是否显示
actionsConfig
ConversationActionsConfig
-
用于自定义会话操作配置
highlightMatchString
string
-
会话列表项 Title 高亮匹配关键词
Title
Component
ConversationPreviewTitle
渲染会话列表项标题区域
LastMessageAbstract
Component
ConversationPreviewAbstract
渲染会话列表项最新消息摘要区域
LastMessageTimestamp
Component
ConversationPreviewTimestamp
渲染会话列表项最新消息时间戳区域
Unread
Component
ConversationPreviewUnread
渲染会话列表项消息未读标识区域
ConversationActions
Component
ConversationActions
渲染会话列表项会话操作区域
Avatar
Component
Avatar
渲染会话列表项头像区域
className
string
-
指定根元素类的 CSS 自定义名称
style
CSSProperties
-
指定根元素样式的自定义样式

Events

事件名
参数
说明
select-conversation
(conversation: ConversationModel)
指定在选择对话列表中的对话时接收回调的事件

示例：自定义类 Discord 风格

Discord 是一个流行的聊天应用程序，类似于 Skype 或 Telegram。Discord 中的聊天内容如下图所示:

通过对 ConversationPreview 布局、功能以及样式的定制，我们可以快速实现类 Discord 效果。
<template>
  <div
    :class="[
      'discord-preview-ui',
      {
        'conversationPreview--active': activeConversation?.conversationID === props.conversation.conversationID,
      }
    ]"
    @click="handleSelectConversation"
  >
    <label class="discord-preview-ui__tag">
      #
    </label>
    <span class="discord-preview-ui__title">{{ conversation?.getShowName() }}</span>
  </div>
</template>

<script lang="ts" setup>
import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';

const { setActiveConversation, activeConversation } = useConversationListState();

interface Props {
  conversation: ConversationModel;
}

const emit = defineEmits<{
  selectConversation: [conversation: ConversationModel];
}>();

const props = withDefaults(defineProps<Props>(), {});

const handleSelectConversation = () => {
  setActiveConversation(props.conversation.conversationID);
  emit('selectConversation', props.conversation);
};
</script>
<style scoped>
.discord-style-app {
  background-color: #2f3136;
  padding: 20px;
  border-radius: 8px;
}

.discord-conversation-list {
  background-color: #2f3136;
}

.discord-preview-ui {
  height: 34px;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 1px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.discord-preview-ui__tag {
  margin-right: 6px;
  font-size: 16px;
  color: #8e9297;
  font-weight: 600;
  line-height: 1;
}

.discord-preview-ui__title {
  font-size: 16px;
  color: #8e9297;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.discord-preview-ui:hover {
  background-color: #393c43;
}

.discord-preview-ui:hover .discord-preview-ui__tag,
.discord-preview-ui:hover .discord-preview-ui__title {
  color: #dcddde;
}

.conversationPreview--active {
  background-color: #404249 !important;
}

.conversationPreview--active .discord-preview-ui__tag,
.conversationPreview--active .discord-preview-ui__title {
  color: #ffffff !important;
}

.discord-preview-ui::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
</style>

<template>
  <ConversationList :preview="CustomConversationPreview" />
</template>

<script setup lang="ts">
import { ConversationList } from '@tencentcloud/chat-uikit-vue3';
import CustomConversationPreview from './CustomConversationPreview.vue';
</script>
ConversationListPreview 定制后效果如下：
修改前
修改后







中国站
目录