消息类型 | 显示效果图 |
文本类消息 | |
图片类消息 | |
语音类消息 | |
视频类消息 | |
文件类消息 | |
自定义消息预设样式 | 显示效果图 |
超文本类消息 | |
评价类消息 | |
订单类消息 | |
TUIStore.watch(StoreName.CHAT, { messageList: onMessageListUpdated })
来监听获取。
收到的自定义消息根据相应的具体类型字段以不同的形式展示在消息列表中 。
下面我们讲解下如何展示自定义消息。messageBubble
的自定义消息类型内容区渲染 messgaeCustom
实现。
您可以在路径 src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
文件下新增您需要的自定义消息展示结构样式。
以超文本类型消息展示结构为例,示例代码如下:<template v-else-if="isCustom.businessID === 'text_link'"><div class="textLink"><p>{{ isCustom.text }}</p><a :href="isCustom.link" target="view_window">{{TUITranslateService.t("message.custom.查看详情>>")}}</a></div></template>
TUIChatService.sendCustomMessage
方法来发送一条自定义消息,详情请参见:SendCustomMessage。import { TUIChatService } from "@tencentcloud/chat-uikit-engine";let promise = TUIChatService.sendCustomMessage({payload: {data: JSON.stringify({businessID: "evaluation",version: 1,score: 5,comment: "so pretty!!!"}),description: "Evaluation of this service",extension: "Evaluation of this service"}});promise.catch((error) => {...});
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";let promise = TUIChatService.sendCustomMessage({payload: {data: JSON.stringify({businessID: "text_link",text: "Welcome to Chat. Let's chat!",link: "https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=social"}),description: "",extension: ""}});promise.catch((error) => {...});
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";let promise = TUIChatService.sendCustomMessage({payload: {data: JSON.stringify({businessID: "order",title: "Chat",description: "Standard Edition",price: "399 USD/month",link: "https://buy.tencentcloud.com/avc",imageUrl: "https://1302445663.vod2.myqcloud.com/cea47bfavodsgp1302445663/fd67ff345576678022395175485/2lCqNHbz5aYA.png",}),description: "",extension: ""}});promise.catch((error) => {...});
名称 | 类型 | 可选类型 | 描述 |
options | 必选 | 自定义消息相关参数 | |
sendMessageOptions | 可选 | 消息发送选项 |
Promise.<any>
本页内容是否解决了您的问题?