vue3+pinia，我用两天时间写了一个微信聊天模拟页面_vue仿微信聊天窗口

1.起因:

年后在为找工作发愁，偶然间在b站刷到几个离谱的微信聊天视频，虽然都是段子，但是当时就在想自己能不能做一个这样的聊天记录界面。

 

---

2.想法:

用微信备忘了一下页面该实现的功能。

 

---

3.成品及功能实现:

因为主学前端，技术栈主要使用vue3和pinia，没有使用布局ui，纯手写页面布局。初始页面如下:

 

主要功能按钮有4个，如下:

 

①为输入框，点击可修改对象名字

---

②为头像，点击可选择头像并进行替换，右下按钮可点击进行刷新，选择更多头像

③为输入框，点击输入内容，回车发送

---

④为功能按钮，点击展开设置页面

---

设置功能按钮如下:

• 更换角色，点击可更换输入角色，绿色为己方，白色为对方
• 更改时间，时间为实时时间，点亮按钮后可更改聊天记录中的时间
• 角色模糊，点亮后可遮挡对方昵称
• 
• 被删好友，点亮后己方再次输入，会进入被删好友提示模式
• 
• 确定选择，点击后收起功能页面

4.小实践:

 

5.难点及实现:

聊天气泡布局有点难弄，用边框三角和flex布局，左右气泡用flex-direction设置reverse实现。

头像数据获取，刚开始用axios获取百度数据没成功。后来弄烦了，用python直接获取图片地址写到了文件里面，男女头像各150保存到数组中，直接随机数取8张。

6.线上地址:

http://nav.lkd-web.online/chat/index.html