0


【vue】仿PC端微信制作聊天框

前言

采用(vue+vue-router+vuex+es6+stylus) 来实现一个仿PC端微信的小demo,可以使用一个智能api,实现智能对话。欢迎大家对鄙人提出宝贵意见,相互学习讨论,一起进步。

demo地址
源码地址

demo做的是PC版,建议使用电脑预览,根据自己需求提取样式&脚本

功能

  • 聊天记录将会被保存到localStorage中,刷新之后记录依然存在。
  • 在搜索栏可以输入你想搜索的值,列表会过滤出对应的好友。
  • 聊天列表负责展示可聊天的好友。包括最后一条信息的时间和内容。点击不同的好友对话可以与不同的好友发送信息

项目引用说明

在这里插入图片描述

实现页面的核心组件分别是搜索框,左侧聊天列表,消息对话框,还有输入框

搜索框

这里主要是input的事件@keyup
在这里插入图片描述

左侧聊天列表框

添加红点,对最新消息卡片添加置顶操作

消息对话框

添加了滚动顶部加载更多

在这里插入图片描述

输入框

添加了点击右键出现菜单
在这里插入图片描述

总结

虽说在这里使用vuex有点大材小用,但是面对各组件之间状态传递,多层嵌套的组件传参,毅然决然决定使用vuex进行数据管理,把所有事件和状态存储在store对象中,在组件中通过计算属性获得事件,因此就有了实时性。
聊天消息列表在发送消息后,超出页面的时候要滑倒最底下看最后一条信息,让容器的滑动垂直位置等于其整个高度。

this.$refs.list.scrollTop = this.$refs.list.scrollHeight

但是很多时候就会忽略掉一个异步问题,我就曾踩到这个坑,甚至开始怀疑是不是解决方法写错了,实际上只要在一个异步,就可以解决。

setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
标签: vue.js 微信 前端

本文转载自: https://blog.csdn.net/weixin_44070058/article/details/125328379
版权归原作者 托尼沙滩裤 所有, 如有侵权,请联系我们删除。

“【vue】仿PC端微信制作聊天框”的评论:

还没有评论