TUIKit/components/TUIConversation/conversation-list/index.vue
Sample code:<template><div class="tui-conversation-list"><!-- Conversation List operation panel --><ActionsMenu .../><!-- Conversation List Main --><div v-for="(conversation, index) in conversationList" ...><!-- Conversation List Item --><div :class="['TUI-conversation-item']"><aside class="left"><!-- Avatar --><img class="avatar" :src="conversation.getAvatar()" /><!-- User Online Status --><div ... :class="['online-status']"></div><!-- Conversation Unread Count --><span class="num" ...>...</span><!-- Conversation Unread Red Dot(displayed in Do Not Disturb mode) --><span class="num-notify" ...>...</span></aside><div class="content"><div class="content-header"><!-- Conversation Name --><label class="content-header-label"><p class="name">{{ conversation.getShowName() }}</p></label><!-- Conversation Last Message --><div class="middle-box"><!-- Conversation Last Message When Mentiond --><span class="middle-box-at" ...>{{ conversation.getGroupAtInfo() }}</span><!-- Conversation Last Message Content --><p class="middle-box-content">{{ conversation.getLastMessage("text") }}</p></div></div><div class="content-footer"><!-- Conversation Lastest Message Time --><span class="time">{{ conversation.getLastMessage("time") }}</span><!-- Conversation Muted Flag --><Icon v-if="conversation.isMuted" :file="muteIcon"></Icon></div>...</template>
TUIKit/components/TUIConversation/conversation-list/style/web.scss
.
Below is an example code for setting the avatar style in the conversation list:.TUI-conversation {&-item {.left {.avatar {width: 30px; // avatar widthheight: 30px; // avatar heightborder-radius: 5px; // avatar border radius}}}}
src/TUIKit/components/TUIChat
file directory.src/TUIKit/components/TUIChat/chat-header/index.vue
. The chat UI title bar provides various functions for customization, such as background, font size, button icons, click events, feature toggles, etc.
The illustrative code is as follows:<template><div :class="['chat-header', !isPC && 'chat-header-h5']">...<!-- Chat name / [Typing...] status prompt--><div :class="['chat-header-content', ...]">{{ currentConversationName }}</div><!-- Group chat settings extension --><div :class="['chat-header-setting', ...]"><div v-for="(item, index) in extensions" :key="index" @click.stop="handleExtensions(item)"><Icon :file="item.icon"></Icon></div></div></div></template>
src/TUIKit/components/TUIChat/chat-header/index.vue
file.
The sample code for setting the font size and background color of the chat window title bar is as follows:.chat-header {background-color: #147AFF;// chat background color&-content{font-size: 16px;// chat name font size}}
src/TUIKit/components/TUIChat/message-list/style/web.scss
.
The sample code for setting the background color of the chat window's message area is as follows:.TUI-chat {...&-message-list {background-color: #006eff;}}
.TUI-chat {...&-message-list {background-image: url(https://qcloudimg.tencent-cloud.cn/raw/176cddbfb778a4bb26a5d423056efe1d.png);}}
src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
, and it is implemented using the Avatar common component. If the user does not set an avatar, a default avatar is displayed. You have the capability to personally tailor the default avatar, decide if the avatar is rounded or fill other size specifications.Parameter Name | Parameter Type | Is Mandatory | Default Value | Parameter Description | |
url | string | Yes | "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png" | URL of the profile image | |
size | string | No | "36px" | Profile image dimensions | |
borderRadius | string | No | "5px" | Rounded corners for the profile picture's border | |
useSkeletonAnimation | boolean | No | false | Is a skeleton screen employed? | |
<AvataruseSkeletonAnimation:url="message.avatar || ''"/>
<AvataruseSkeletonAnimation:url="message.avatar || ''"size="40px"borderRadius="0px"/>
avatar
(profile photo), messageArea
(content area), and messageLabel
(label area). The detailed structure is as follows: src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
file.
Here is a sample code to set the color of the message bubbles: .message-bubble {.message-bubble-main-content {.message-body {.message-body-main {.content-in {background: #fbfbfb; // Set the color of the receiving message bubbleborder-radius: 0px 10px 10px 10px;}.content-out {background: #dceafd; // Set the color of the sender message bubbleborder-radius: 10px 0px 10px 10px;}}}}}
src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
file.
The following sample code shows how to set the sender's nickname style:.message-bubble {.message-bubble-main-content {.message-body {.message-body-nickName {font-weight: 500; // Set the font weight of the sender's nicknamefont-size: 14px; // Set sender nickname font sizecolor: #999999; // Set the font color of the sender's nickname}}}}
src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
file.
The following code sample shows how to set the chat content style:.emoji {width: 20px;// emoji widthheight: 20px;// emoji height}.text {white-space: pre-wrap;font-size: 14px;// text message font sizecolor: #999999;// text message font color}
src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue
.
Here is the sample code for reference:.message-tip {margin: 0 auto;color: #999999;// message tip font colorfont-size: 14px;// message tip font sizebackground: red;// message tip background color}
src/TUIKit/components/TUIChat/message-input-toolbar/index.vue
. You can delete unwanted features from the file.
The example code is as follows:<div><div><!-- Emoji Picker --><EmojiPicker v-if="!isUniFrameWork"></EmojiPicker><!-- Taking photos, only available on uniapp --><ImageUpload v-if="isUniFrameWork" imageSourceType="camera"></ImageUpload><!-- Image Upload --><ImageUpload imageSourceType="album"></ImageUpload><!-- File Upload --><FileUpload v-if="!isUniFrameWork"></FileUpload><!-- Video Upload --><VideoUpload videoSourceType="album"></VideoUpload><!-- Taking videos, only available on uniapp --><VideoUpload v-if="isUniFrameWork" videoSourceType="camera"></VideoUpload><!-- Evaluate --><Evaluate></Evaluate><!-- Commonly Used Phrases --><!-- <Words></Words> --></div></div>
Was this page helpful?