20240613每日前端-------vue3实现聊天室(二)

news2024/11/25 7:05:25

看效果图:

在这里插入图片描述
今天具体讲下,聊天消息框的布局:

消息框大致分为两块:

  • 别人发来的消息
  • 自己发出的消息

元素如下:

  • 头像
  • 消息
  • 发送人+发送时间
    在这里插入图片描述
    html代码设计如下:
    整体先用一个div作为外边框,观察上面元素很好判断出来,(发送人+发送时间)+(你或者我)+消息内容。共同组合成一行元素。那么我们在父级div下面可以再加一层div用来循环每一行的数据内容。
    又根据图形判断出来,发送人+发送时间室单独一行,你或者我+消息内容是单独一行。这样,就再写两个div分别用来区分上下两个小行。
    自此,整体html架构元素完成。
<div class="msg-container">
      <div v-for="(item,index) in msgList">
        <div :class="['msg-one',item.fromId == currentUser.userId ?  'message-right' : 'message-left']">
          <div>
          <div class="msg-header">
            <!-- 时间 -->
            <div class="msg-date msg-user" style="margin-left: 5px;margin-right: 5px">
              {{item.fromName}}  {{item.fromTime}}
            </div>
          </div>
          <div :class="['msg-body', item.fromId == currentUser.userId ?  'msg-body-my' : '']">
            <!-- 头像 -->
            <div>
              <n-avatar object-fit="cover"
                        :size="40"
                        lazy
                        style="cursor: pointer"/>
            </div>
            <!-- 文本消息 -->
            <div class="message">
              {{item.message}}
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>

基于以上代码,展开说一下样式的设计。
1、设置总体背景色,设置整体聊天框,得出高度滚动条。

  .msg-container {
    background: var(--midWhite);
    overflow-y: scroll;
    height: calc(100% - 240px);
  }

2、设置外边框div为flex布局,增加元素排版方式为align-items: flex-start;(align-items设置flex子项在每个flex行的交叉轴上的默认对齐方式。)
在这里插入图片描述
增加flex-direction:column (设置主轴的方向从上到下)
在这里插入图片描述

  .msg-one {
    margin: 15px 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

3、设置右边消息,使得容器内容,flex-direction: row-reverse;(从右往走排版)

  .message-right {
    flex-direction: row-reverse;
  }

4、以上即可完成大体样式排版。
全部样式代码如下:

 .msg-body-my{
    flex-direction: row-reverse;
  }
  .msg-body{
    display: flex;
    align-items: flex-start;
  }
  .msg-container {
    background: var(--midWhite);
    overflow-y: scroll;
    height: calc(100% - 240px);
  }

  .msg-one {
    margin: 15px 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .message {
    max-width: 50%;
    padding: 5px 10px;
    line-height: 25px;
    word-break: break-all;
    position: relative;
    color: var(--black);
    margin: 0 12px 0 12px;
  }

  .message::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 3px solid;
    top: 0;
  }

  .message-left .message {
    background-color: var(--white);
    border-radius: 0 4px 4px 4px;
  }

  .message-left .message::before {
    left: -6px;
    border-color: var(--white) var(--white) transparent transparent;
  }

  .message-right {
    flex-direction: row-reverse;
  }

  .message-right .message {
    background-color: var(--messageColor);
    border-radius: 4px 0 4px 4px;
  }

  .message-right .message::before {
    right: -6px;
    border-color: var(--messageColor) transparent transparent var(--messageColor);
  }

  .msg-date, .msg-user {
    font-size: 12px;
    color: var(--greyFont);
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1818957.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【算法】Graham 凸包扫描算法 ( 凸包概念 | 常用的凸包算法 | 角排序 | 叉积 | Python 代码示例 )

文章目录 一、Graham 凸包扫描算法1、凸包概念2、常用的凸包算法3、Graham 凸包扫描算法 二、Graham 算法前置知识点1、角排序2、叉积3、算法过程分析 三、代码示例1、完整代码示例2、执行结果 使用 Graham 算法绘制的凸包效果 : 博客代码下载 : https://download.csdn.net/d…

提升设计效率,选择亿达四方SolidWorks代理服务

在当今快速发展的设计和制造行业中&#xff0c;拥有高效、可靠的工具是企业保持竞争力的关键。作为设计领域的领军软件&#xff0c;SolidWorks以其强大的三维建模功能、直观的用户界面以及广泛的行业应用而闻名。然而&#xff0c;要充分发挥这款软件的潜力&#xff0c;选择一个…

2024下《系统分析师》50个高频考点汇总!背就有效

宝子们&#xff01;上半年软考已经结束一段时间了&#xff0c;准备备考下半年软考高级-系统分析师的小伙伴可以开始准备了&#xff0c;毕竟高级科目的难度可是不低的&#xff0c;相信参加过上半年系分的小伙伴深有体会。 这里给大家整理了50个高频考点&#xff0c;涵盖全书90%…

DDei在线设计器-配置主题风格

DDeiCore-主题 DDei-Core插件提供了默认主题和黑色主题。 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 默认主题 黑色主题 使用指南 引入 import { DDeiCoreThemeBlack } from "ddei-editor";使用并修改设置 extensions: [......//通过配置&am…

Java老人护理上门服务类型系统小程序APP源码

&#x1f338; 老人上门护理服务系统&#xff1a;温暖与专业并存 &#x1f338; 一、&#x1f3e0; 走进老人上门护理服务系统 随着社会的快速发展&#xff0c;我们越来越关注老年人的生活质量。老人上门护理服务系统应运而生&#xff0c;它结合了现代科技与人性化服务&#…

stable-diffusion.cpp 文字生成图片

纯 C/C 中 [Stable Diffusion] 的推断 https://github.com/CompVis/stable-diffusion ## 特点 - 基于 [ggml]&#xff08;https://github.com/ggerganov/ggml&#xff09; 的普通 C/C 实现&#xff0c;工作方式与 [llama.cpp]&#xff08;https://github.com/ggerganov/llam…

Python提取PowerPoint演示文稿表格保存到文本及Excel文件

PowerPoint作为广泛使用的演示工具&#xff0c;常被用于展示各类数据报告和分析结果&#xff0c;其中&#xff0c;表格以其直观性和结构性成为阐述数据关系的不二之选。然而&#xff0c;在数据分析、文档归档或跨平台分享的场景下&#xff0c;幻灯片中的表格功能难以满足需求&a…

电脑桌面提醒做事的app 好用的桌面提醒app

在快节奏的现代生活中&#xff0c;我们每天都要通过电脑处理大量的工作事项。然而&#xff0c;繁忙的工作节奏有时会导致我们遗忘某些重要任务&#xff0c;从而带来不必要的损失。为了避免这种情况&#xff0c;选择一款好用的桌面提醒app显得尤为重要。 想象一下&#xff0c;你…

Java中的方法重写与重载

在Java编程语言中&#xff0c;方法重写&#xff08;Override&#xff09;和方法重载&#xff08;Overload&#xff09;是实现代码多态性的两种基本方式。它们允许程序员以多种方式使用相同的方法名&#xff0c;增加了程序的可读性和可重用性&#xff0c;但它们的应用场景和规则…

一文读懂Partisia Blockchain 的MOCCA方案:资产托管的最优解

Partisia Blockchain是一个兼具隐私、可互操以及高迸发特性的Layer1系统&#xff0c;其通过将区块链以及零知识计算&#xff08;包括MPC、零知识证明ZKP等&#xff09;以协作的方式结合起来&#xff0c;并通过分片方案、Bring Your Own Coin&#xff08;BYOC&#xff09;功能和…

文心一言 VS 讯飞星火 VS chatgpt (280)-- 算法导论20.4 1题

一、假设 CONNECTED-COMPONENTS 作用于一个无向图 G(V&#xff0c;E)&#xff0c;这里V{a&#xff0c;b&#xff0c;c&#xff0c;d&#xff0c;e&#xff0c;f&#xff0c;g&#xff0c;h&#xff0c;i&#xff0c;j&#xff0c;k}&#xff0c;且 E 中的边以如下的顺序处理:(d…

Leetcode 力扣117. 填充每个节点的下一个右侧节点指针 II (抖音号:708231408)

给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NULL 。 初始状态下&#xff0c;所有 next 指针都…

PCIE的吞吐量如何计算和记忆诀窍?

简介&#xff1a; PCIe标准中的性能参数有好几个&#xff0c;比如设备的带宽和吞吐量是多少&#xff1f;传输速率&#xff1f; 百度百科上&#xff0c;PCIE标准的传输速率与带宽对应表如下&#xff08;表中速率为单向速率&#xff09;。网上有些数据是双向的&#xff0c;性能数…

流程设计的基本步骤

背景 公司为什么要流程&#xff0c;已经有专门章节进行阐述&#xff1b; 什么是流程&#xff0c;已经有专门章节进行专门阐述&#xff1b; 那么接下来这个章节讨论&#xff0c;流程设计的基本步骤&#xff0c;那么谁来设计流程呢&#xff0c;让一个部门的员工来设计一份流程…

汽车行驶中是怎么保障轴瓦安全的?

汽车轴瓦是一种用于减少摩擦和支撑转动部件的关键零部件&#xff0c;通常用于发动机的曲轴、凸轮轴等转动部件上。主要作用是减少转动部件之间的摩擦&#xff0c;支撑和保护曲轴、凸轮轴等旋转部件&#xff0c;确保它们在高速旋转时的稳定性和耐用性。 在汽车轴瓦加工过程中&am…

HarmonyOS(36) DevEco Studio 配置debug和release

在android开发中可以在build.gradle来配置realease和debug,在HarmonyOS中可以通过build-profile.json5文件中通过buildModeSet配置&#xff1a; 在DevEco Studio 中可以通过下面来选择运行debug还是release&#xff1a; 我们可以通过BuildProfile.ets里面的静态变量获取当前…

企业中的绩效管理

背景 企业中为何需要绩效管理&#xff0c;企业绩效管理为何比较难&#xff0c;这在企业管理中是非常难&#xff0c;同样也是非常有价值的命题&#xff0c;那么首先应该对这个命题有清晰的认知&#xff0c;特别是要想明白为何企业需要绩效管理&#xff0c;应该先明白企业。 企…

C51学习归纳12 --- 外部中断、红外遥控

红外遥控是一个非常使用的技术&#xff0c;所以有必要单独讲一下。我们之前已经完成了电机调速的功能&#xff0c;现在我们讲红外控制和电机调速结合在一起&#xff0c;使用红外实现电机的调速。 为什么要采用外部中断&#xff0c;因为红外遥控的发送速率非常快&#xff0c;如果…

电商价格监测对于品牌渠道管控的重要性

当品牌开启经销渠道或涉足电商渠道时&#xff0c;必须着手进行线上线下价格监测。只有监控到电商价格&#xff0c;才能明晰出货后的商品历经多轮市场演绎后的实际价格&#xff0c;进而了解市场需求下的真实低价行为。借助力维网络开发的电商价格监测系统&#xff0c;品牌商能知…

【开发环境】PX4无人机实物使用视觉或运动捕捉系统进行位置估计

PX4无人机实物使用视觉或运动捕捉系统进行位置估计 PX4中关于外部位置信息的MAVLink话题参考坐标系EKF2调整配置参数调整EKF2_EV_DELAY参数 与ROS共同使用将OptiTrack MoCap系统提供的姿态数据导入ROSMotive MoCap软件的步骤将姿态数据导入ROS重新映射姿态数据 将姿态数据转发到…