AI聊天-如何画出类似微信一样的聊天记录 第2集

如何画出类似微信一样的聊天记录

一、前言

在聊天的过程中，我们聊天往往有个特点好友的在左侧，自己的在右侧，本篇为讲解如何快速实现聊天记录的展示

二、源码地址

感兴趣的朋友源码链接已准备好:从零开始搭建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集
如果大佬有更好的方式请记得帮忙留言哦