项目中的聊天框通过界面布局实现消息区与输入区的分离，完成消息接收与发送功能。

阅读量：

思路：通过设置 $display:flex$ 布局，默认消息采用左侧排列；当某个条件被满足时（通过判断消息来源区分），若为本人发送的消息，则排列靠右；配置 $flex-direction$ 属性为 $row-reverse$ 即可实现目标。

先上效果图

在这里插入图片描述

效果图还满意的话接着看代码吧

ts:先看这个好理解下面html模板中绑定的内容

复制代码

    class userMessages{
      sender:string;//发送方，用sender与本地cookie中的username比较，决定信息显示在左边还是右边
      receiver:string;//接收方
      headImg:string;//头像
      content:string;//发送的文本信息
      picture:string;//发送的图片
    }
    
    模拟的数据：
    userMessage:userMessages[]=[{sender:"欧阳娜娜",receiver:"虞姬",headImg:"https://

全部评论 (0)

还没有任何评论哟~