如何画出类似微信一样的聊天记录
一、前言
在聊天的过程中,我们聊天往往有个特点好友的在左侧,自己的在右侧,本篇为讲解如何快速实现聊天记录的展示
二、源码地址
感兴趣的朋友源码链接已准备好:从零开始搭建AI聊天
上一集链接: AI聊天-界面自定义布局 第1集
三、效果
实现聊天主界面截图
四、实现思路
1、新建组件 chat-main
2、在第1集链接地址的基础上将聊天主内容区替换为 chat-main 组件
3、在chat-main 组件新建data 数据 并写好消息数据,引入组件markdown-it-vue
4、写样式及标签
五、代码分析
1、新建组件 chat-main,将聊天主内容区替换为 chat-main 组件
<div class="container">
<div class="aside">
<div class="logo">logo区域</div>
<div>聊天选择区域</div>
</div>
<div class="main-right">
<div class="header">标题区域</div>
<chat-main></chat-main>
<div class="send">发送消息区域</div>
</div>
</div>
2、在chat-main 组件新建data 数据 并写好消息数据,引入组件markdown-it-vue
msgList:[
{id:"1",userId:"1",groupId:"1",answer: "1. 搞笑视频:这是抖音最受欢迎的视频类型之一,包括恶搞、搞笑短片、搞笑配音等。\n" +
"\n" +
"2. 舞蹈视频:抖音上有很多舞蹈达人,他们会分享自己跳舞的视频,其中一些舞蹈还会变成流行的挑战。\n" +
"\n" +
"6. 美妆视频:抖音上有很多美妆博主,他们会分享自己化妆的视频,包括化妆技巧、产品推荐等。\n" +
"\n" +
"7. 健身视频:抖音上有很多健身达人,他们会分享自己健身的视频,包括健身动作、健身计划等。\n" +
"\n" +
"8. 情感视频:抖音上有很多情感博主,他们会分享自己的情感故事、情感心得等。",createTime:'2023-05-09 10:35:56',
question:"抖音比较火的视频分类"},
{id:"1",userId:"1",groupId:"1",answer: "1. 搞笑视频:这是抖音最受欢迎的视频类型之一,包括恶搞、搞笑短片、搞笑配音等。\n" +
"\n" +
"2. 舞蹈视频:抖音上有很多舞蹈达人,他们会分享自己跳舞的视频,其中一些舞蹈还会变成流行的挑战。\n" +
"\n" +
"3. 情感视频:抖音上有很多情感博主,他们会分享自己的情感故事、情感心得等。",createTime:'2023-05-09 10:35:56',
question:"抖音比较火的视频分类"},
],
options: {
markdownIt: {
linkify: true,
highlight:true
},
linkAttributes: {
attrs: {
target: '_blank',
rel: 'noopener'
}
}
}
3、写样式及标签
<div class="chat-main">
<div class="chat-main-content" v-for="(item,index) in msgList" :key="index">
<li>
<span>{{item.createTime}}</span>
<span style="width: 100%">{{item.question}}</span>
</li>
<li>
<span style="display: flex;text-align: center">
<img src="../asserts/image/gpt.png" width="36" height="36">
<span style="padding-left: 10px">{{item.createTime}}</span>
</span>
<span>
<markdown-it-vue :content="item.answer" class="markdown-body" :options="options"></markdown-it-vue>
</span>
</li>
</div>
<div id="msg_end" style="height: 1px;width: 1px"></div>
</div>
.chat-main{
height: calc(77vh);
text-align: center;
width: 100%;
overflow-y: auto;
}
.markdown-body{
color: #0c0c0c !important;
margin-left: 10px;
border-radius: 5px;
padding-top: 10px;
}
.chat-main-content li{
list-style-type: none;
line-height: 36px;
/*border:solid 1px white;*/
margin: auto;
}
li:nth-child(odd) {
/* 设置奇数项样式 */
margin-right: 1.5vw;
text-align: right;
display: flex;
flex-direction: column;
}
li:nth-child(even) {
/* 设置偶数项样式 */
text-align: left;
margin-left: 1.5vw;
}
六、注意事项
1、在标签渲染消息的过程中,注意 for标签 本身的标签将会自动复制
2、在左右对齐的过程中,注意用奇偶标签并设置好边距
li:nth-child(odd) {
/* 设置奇数项样式 */
margin-right: 1.5vw;
text-align: right;
display: flex;
flex-direction: column;
}
li:nth-child(even) {
/* 设置偶数项样式 */
text-align: left;
margin-left: 1.5vw;
}
最后,本编关于如何渲染聊天记录及注意事项给大家分享到这里,记得关注点赞,下一集,将为大家介绍如何让我们的发送消息框悬浮在固定位置
上面项目源码地址AI聊天-如何画出类似微信一样的聊天记录 第2集
如果大佬有更好的方式请记得帮忙留言哦