html聊天界面模板（【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)