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

最新推荐文章于 2024-07-23 16:14:20 发布

清丶凉

最新推荐文章于 2024-07-23 16:14:20 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： css vue.js

本文链接：https://blog.csdn.net/qq_41757660/article/details/124763677

版权

这篇博客介绍了如何使用CSS在PC端实现简单的聊天消息气泡样式。通过参考特定的博客文章，作者展示了实现这一效果的具体步骤，包括在Vue项目中应用CSS样式，以及根据消息发送方的不同来调整气泡的布局，如使用居左或居右的样式。CSS技巧包括设置背景色、圆角以及创建代表气泡的三角形元素。

摘要由CSDN通过智能技术生成

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