拆了3个， 打字的 ， 聊天item ， 聊天list 。大概就这样了。
其中 聊天list 用了一个better-scroll这个第三方插件。
首先第一步就是开发这个 聊天item
分析一下需求，别人发过来的和我们发过去的是两个排版和样式，但是不用单独写两个，用个逻辑区分一下就可以了，也可以动态绑定css什么的差别很小。
这个是只有1边的，逻辑就是在消息那边加个v-if，判断来源，也可以动态绑定css
弄好以后就这样
个人觉得css还是比较重要的，这里用了sass来写。主要解决方案就是用一个display:flex配合上flex-direction: row-reverse让头像和消息左右排列
这个是没有调样式的，只是为了自己嗨弄的，可能会很丑。
最后大概就是这样的咯
下一篇 （2）点这里
您好，要更改聊天框前面的时间颜色，需要打开wlk的源代码，找到time.css文件，打开文件，修改里面的.time-stamp元素的color属性，即可更改聊天框前面的时间颜色。另外，您也可以在time.css文件中添加新的样式，以满足您的特殊需求。
