Vue3聊天气泡简单实现思路

Vue3聊天气泡简单实现

实现聊天气泡主要有两个注意点：
①是根据字体数量自适应框的长度
②字体到框有边距，也就是为了美观

这篇博客主要讲实现的思路，不讲聊天气泡的三角突出点，如下所示：

三角突出点通过简单的border去设置就可以得到了

第一个注意点根据字体数量自适应框的长度

我们可以使用display:inline-block去实现，这样聊天框具有块和行内元素的特点

第二个注意点是字体到框之间的边距，即如图中的这段距离所示：

我们可以通过padding去设置这个边距，通过设置边距，会使得聊天框撑大起来，让聊天框看起来更好看

注意，四周都要设置padding

padding:5px; 上右下左都设置了5个像素