CSS实现PC端简单的聊天消息气泡样式

CSS实现PC端简单的聊天消息气泡

1、参考博客：

https://blog.csdn.net/weixin_35981962/article/details/117978624

2、实现效果

3、Vue代码

<div v-for="(item, index) in chatContent" :key="index"><!-- 右侧 消息构建 --><div v-if="item.senderId == rightUser.id" class="bkbubble left"><!-- 消息 --><span class="bkbubble-right"><span v-if="item.url != null && item.url != ''"><el-image class="chat-image" :src="item.url" fit="fill" :preview-src-list="[item.url]"></el-image></span><div v-else class="chat-text">{{item.text}}</div></span><span class="triangle-top-right"></span><!-- 右侧头像 --><el-avatar class="chat-avatar" :src="user.avatar" :preview-src-list="[user.avatar]" fit="fill" @error="errorLoadAvatar(user, 'avatar')">                            </el-avatar></div><!-- 左侧消息构建--><div v-else class="bkbubble right"><el-avatar class="chat-avatar" :src="toUser.avatar" :preview-src-list="[toUser.avatar]" fit="fill" @error="errorLoadAvatar(toUser, 'avatar')"></el-avatar>
<!-- 消息 --><span class="triangle-top-left"></span><span class="bkbubble-left"><span v-if="item.url != null && item.url != ''"><el-image class="chat-image" :src="item.url" fit="fill" :preview-src-list="[item.url]"></el-image></span><div v-else class="chat-text">{{item.text}}</div></span></div>

CSS样式

.chat-window {width:50%;min-width:850px;min-height:500px;border:2px solid lightgray;background-color:#FFFFFF;margin:auto;
}.triangle-top-left {width: 5px;height: 5px;border-top: 15px solid #EEEEEE;border-left: 15px solid transparent;margin-top: 10px;margin-left: 5px;
}
.triangle-top-right {width: 5px;height: 5px;border-top: 15px solid #FED3BD;border-right: 15px solid transparent;margin-top: 10px;margin-right: 5px;
}
.bkbubble.right div:before, .bkbubble.left div:before {border-style: solid;margin-top: 5px;
}.bkbubble {margin: 15px 0px;display: -webkit-flex;display: flex;-webkit-align-items: top;align-items: top;
}.bkbubble.left {-webkit-justify-content: right;justify-content: right;
}.bkbubble .bkbubble-left {padding: 10px;border-radius: 5px;background-color: #EEEEEE;
}.bkbubble-right {padding: 10px;background-color: #FED3BD;border-radius: 5px;
}.bkbubble.right {margin-left: 10px;border-width:
}.bkbubble.left {margin-right: 5px;border-width: 0 0 12px 12px ;
}.chat-image{width: 150px;height: 150px;
}
.chat-avatar {width: 40px; height: 40px;
}
.chat-text {max-width: 400px;
}

4、简单讲解
实现步骤：
1）判断消息发送方，选择性使用居左、居右两种样式
2）画消息气泡，其实就是给消息所在的元素添加背景色，并加入圆角，接着在气泡的左侧或右侧添加一个三角形，从而拼接出一个简单的气泡样式（如下图，以右侧消息气泡为例）

CSS实现PC端简单的聊天消息气泡样式相关推荐

android气泡聊天消息背景,Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果
本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码,供大家参考,具体内容如下先画圆,都会吧.代码如下: public class Bezier extends View { ...
腾讯QQ首次在PC端采用气泡式聊天界面(from:36kr)
小伙伴们,你们是否已经发觉,曾经爱过的姑娘在不知不觉中已变了模样,曾经鲜艳的红领巾也不再飘荡于前胸,而曾经最熟悉的QQ电脑 UI,竟在不知不觉中改头换面了. 没关系,少年,还不晚,今天,让我们携起手来 ...
【HTML CSS】PC端品优购项目效果图和代码
素材及代码品优购首页品优购列表页品优购注册页 [index.html] <!DOCTYPE html> <html lang="zh-CN">& ...
pc css框架,PC端框架—semantic ui
顾名思义这是一款语义化的UI框架,代码可读性与可理解性很强,界面简洁美观,与bootstrap风格接近,基于jquery,适用响应式布局,提供一些基本模板,兼容Firefox.Chrome.safa ...
Python实现QQ PC端给好友发送消息
上一篇说了发现有交易机会时可以发邮件,如果不想下载邮箱app的话,也可以通过qq来提醒自己. 具体的方法就是先查找qq的句柄,然后用SendMessage给qq窗口发送消息.这样的前提就是跟好友的聊天 ...
微信pc端自动保存聊天图片的dat格式转换为jpg可查看格式工具分享
微信图片保存位置:C:\Users\xxx\Documents\WeChat Files\xxx\FileStorage\Image 图片格式为.dat格式,无法直接查看,整理微信聊天文件中的图片时, ...
flutter 布局裁剪及实现微信聊天消息气泡组件
前言在实际项目开发中我们有时候可能需要实现一个不规则的形状,比如一个四个角带点圆角的平行四边形容器,针对这种需求一般我们主要有三种方式实现: 1,裁剪 2,绘制 3,自定义形状ShapeBorder ...
移动端-简单新闻类列表模板样式
demo html <ul class="news"><li class="list list-right-img"><div c ...
修改pc端浏览器的滚动条的默认样式
网上找的一个方法,记录到一下自己的博客内.方便以后搬砖之用. /*滚动条样式*/::-webkit-scrollbar {/*滚动条整体样式*/width: 4px; /*高宽分别对应横竖滚动条的尺寸 ...

CSS实现PC端简单的聊天消息气泡样式

CSS实现PC端简单的聊天消息气泡

CSS实现PC端简单的聊天消息气泡样式相关推荐

最新文章

热门文章