摸鱼时刻打造优弧语录，经典的你小子

上面是优弧语录的代码片段，只图一乐😶‍🌫️

微信聊天框

构造大框

仿造微信的聊天框，它由头像+昵称+聊天内容构成，基本的大框如下

<div class="chat" v-for="item in chats">
    <div class="chat-img"><img src=""></div>
    <div class="chat-name">优弧</div>
    <div class="chat-body">
      <div class="chat-box"></div>
      <span class="chat-content">{{item.chat}}</span>
    </div>
</div>
复制代码

我根据文档流配合浮动实现布局，先通过为头像设定并赋予左浮动，使其脱离文档流。

.chat .chat-img{
      float: left;
}
.chat .chat-img img{
      width: 40px;
      height: 40px;
}
复制代码

再通过为聊天主体即chat-name与chat-content赋予左外边距，因为头像左浮动脱离了文档流，所以在设置外边距之前头像和内容是层叠在一起的。

.chat-name .chat-content{
    margin: 5px 50px;
}
复制代码

通过计算头像盒子的大小来适当地设置左外边距大小

解决细节

为了高仿微信聊天，有一处细微的细节需要去处理，那就是微信聊气泡左边的一个三角形，这就需要我们会使用CSS画三角啦

.chat-box {
     height: 0px;
     width: 0px;
     border:10px solid;
     border-color: transparent #ffffff transparent transparent;
}
复制代码

其实一个三角形很简单，我们利用border的特性就能画出一个简易的三角形，如下步骤

1. 为一个盒子设置border的大小
2. 将高度和宽度设置为0
3. border有四个方向，我们选择左，设置颜色，其他方向设置为transparent透明
4. 得到一个箭头向左的三角形

画完这个小小的三角形后我们通过相对定位就可以将它固定在气泡左侧了

文本处理

为了更加逼真，所以需要考虑到文本宽度与换行的问题.

最初我直接为chat-body设置了宽度百分比，但是效果就是文本少的情况下会多出一部分空白文本框，而文本多的时候不能换行，所以我查了一个宽度的属性值fit-content，它能够根据容器内文本内容更改宽度，所以我利用了它解决了适应文本长度问题，不仅仅是这样，我还搭配了max-width属性，设置最大宽度，实现了聊天框的宽度统一，成功仿真。

.chat  .chat-body{
      width:fit-content;
      max-width:300px;
}
复制代码

随机语录

为了展现优弧大大的语录，我进行了一个随机增加的操作，其实很简单，就是利用Math的几个api获取随机值，再添加进我们的渲染数组内。

add(){
      this.chats.push(this.sentences[Math.floor(Math.random()*this.sentences.length)])
}
复制代码

最后

整体实现还是非常简单的（没技术含量），只是突发奇想做了一个这个东西，如果各位掘友喜欢也可以给我来个小赞赞。另外掘金会员还是很值的，不仅是学习上的，每天摸鱼的时候看看会员群也是一大乐子，虽然优弧骗了我续费了2年会员（超级会员），各位弧家人，快来评论区打出你知道的经典优弧话，让我们共建你小子语录！