TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示，如果这些消息类型满足不了您的需求，您可以新增自定义消息类型。
基本消息类型
消息类型 | 显示效果图 |
文本类消息 |  |
图片类消息 |  |
语音类消息 |  |
视频类消息 |  |
文件类消息 |  |
自定义消息
如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
自定义消息预设样式 | 显示效果图 |
超文本类消息 |  |
评价类消息 |  |
订单类消息 |  |
实现步骤
步骤1：思考需要自定义的数据
自定义消息需要传入哪些数据是用户自行决定的，假设我们要开发一个扔骰子（Dice）的自定义消息，示例代码如下所示：
import { useMessageInputState } from '@tencentcloud/chat-uikit-vue3';const { sendCustomMessage } = useMessageInputState();sendCustomMessage({payload: {data: JSON.stringify({ businessID: 'dice', value: Math.ceil(Math.random() * 6) }), // string 类型description: '[骰子]', // string类型 在会话列表摘要中显示的内容extension: '', // string类型 可不填},});
步骤2：创建自定义消息组件
创建
CustomMessage.vue 文件，该组件接收 message 属性，解析 message.payload.data 判断是否是 Dice 消息类型，不匹配时建议回退到内置 <CustomMessage />，否则 IM 内置的自定义消息将不会显示。<script lang="ts" setup>import { computed } from 'vue';import { CustomMessage } from '@tencentcloud/chat-uikit-vue3';import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';const props = defineProps<{ message: MessageModel }>();const DICE_FACES = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];const diceValue = computed<number | null>(() => {try {const parsed = JSON.parse(props.message?.payload?.data || '{}');return parsed?.businessID === 'dice' ? Number(parsed.value) : null;} catch {return null;}});</script><template><div v-if="diceValue" style="display: flex; align-items: center; gap: 8px; padding: 8px 12px;"><span style="font-size: 36px;">{{ DICE_FACES[diceValue - 1] }}</span><span>掷出了 {{ diceValue }}</span></div><CustomMessage v-else :message="message" /></template>
步骤3：注册到 MessageList
通过
messageRenderers prop 传入，key 为 MessageType 枚举值。<template><UIKitProvider theme="light"><div :style="{ display: 'flex', height: '100vh' }"><ConversationList /><Chat><ChatHeader /><MessageList :messageRenderers="customRenderers" /><MessageInput class="message-input-container"><template #headerToolbar><div class="message-toolbar"><div class="message-toolbar-actions"><EmojiPicker /><FilePicker /><VideoPicker /><ImagePicker /><AudioCallPicker /><VideoCallPicker /><button class="icon-button" title="Roll Dice" @click="handleSendDice">🎲</button></div><button class="icon-button" @click="isSearchInChatShow = !isSearchInChatShow"><IconSearch :size="20" /></button></div></template></MessageInput></Chat></div></UIKitProvider></template><script setup lang="ts">import {UIKitProvider,ConversationList,Chat,ChatHeader,MessageListMessageInput,MessageType,EmojiPicker,FilePicker,VideoPicker,ImagePicker,VariantType,AudioCallPicker,VideoCallPicker,} from '@tencentcloud/chat-uikit-vue3';import CustomMessage from './CustomMessage.vue';const customRenderers = { [MessageType.CUSTOM]: CustomMessage };</script><style lang="css" scoped>.message-input-container {border-top: 1px solid #e0e0e0;}.message-toolbar {display: flex;align-items: center;justify-content: space-between;}.message-toolbar-actions {display: flex;align-items: center;gap: 8px;}.icon-button {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border: none;background: transparent;border-radius: 6px;cursor: pointer;color: #666;transition: all 0.2s;}</style>
