Vue.js模仿微信聊天窗口展示组件功能

源代码：https://github.com/doterlin/vue-wxChat

演示地址：https://doterlin.github.io/vue-wxChat/

奔跑

#安装依赖项简介NPM安装#在本地主机上热重新加载服务：8080 NPM运行开发#生产构建，简化NPM运行构建

支持文字和图片的显示(后面会支持发音的显示)。支持滚动加载数据，这取决于我的另一个组件scrollLoader.vue(《Vue.js上下滚动加载组件》)。支持QQ表情，为了使用表情，请全局注册我在main.js实现的命令v-emotion；代码如下：函数to情感(text，isnogif) {var list=['微笑'，'撇嘴'，'颜色'，'发呆'，'骄傲'，'流泪'，'害羞'，'闭嘴'，'睡觉'，'哭泣'，'尴尬'，'生气'，冷汗、疯狂、呕吐、窃笑、快感、白眼、傲慢、饥饿、困倦、恐慌、汗水、憨笑、士兵、挣扎、诅咒和怀疑拍手'，'尴尬'，'坏笑'，'左哼哼'，'右哼哼'，'打哈欠'，'轻蔑'，'委屈'，'要哭了'，'阴险'，'亲吻'，'惊吓'，'怜悯'，'菜刀'，爱，心碎，蛋糕，闪电，炸弹，刀，足球，瓢虫NO '，' OK，月亮，太阳，礼物，拥抱，强壮，虚弱和握手Air kiss，跳跃，颤抖，救火，转身，磕头，转身，跳绳，挥手，兴奋，街舞，亲吻，左太极和右太极。if(！text) {返回文本；} text=text . replace(/\[\ u4e 00-\ u9 fa 5]{ 1，3}\]/gi，function(word){ var new word=word . replace(/\[| \]/gi ' ')；var index=list . indexof(new word)；var background positionx=-index * 24 var imgHTML=' '；if(index 0){ return word；} if(isNoGif){ if(index 104){ return word；} IMghtml=` I class=' static-emotion ' style=' background : URL(https://RES . wx . QQ.com/mpres/htm lendition/images/icon/emotion/default 218877 . gif)$ { backgroundPositionX } px 0；/i` } else { var path=index104 '？/img ' : ' https://RES . wx . QQ.com/mpres/htm length/images/icon '；imgHTML=`！[](${path}/emotion/${index})。gif)` }返回imgHTML});返回文本；}Vue.directive('emotion '，{ bind: function (el，binding){ El . innerhtml=Toemotion(binding . value)})；怎么用？

参数已在组件中描述，并在App.vue中演示：

参数和描述：

微信聊天可视化组件

这取决于scrollLoader组件和指令v-emotion(实现请参见main.js)

参数：

宽度组件宽度，默认为450

WrapBg外部父元素背景色，默认# efeef

最大高度显示窗口的最大高度，默认为900

ContactAvatarUrl好友头像Url

OwnerAvatarUrl微信主头像Url

所有者昵称微信所有者昵称

GetUpperData(必选)滚动到顶部时加载数据的方法。返回值应该是Promise对象，解析的结构和数据一样

GetUnderData(必选)向下滚动时加载数据的方法，返回值同上

数据(必需)以下列结构传入初始化数据：

【{ direction: 2，//表示微信主机发送的消息，1表示联系id: 1，//按照此对消息进行排序，//1为文字，2为图片内容： '您好！【呲牙】'，//当type为1时，这是一条短信，当type2为2时，图片的地址应该存储在这里。后续将支持语音显示ctime:new新日期()。tolocalstring()//显示当前消息的发送时间}，{方向： 1，id : 2，类型： 1，内容： '。[shy]'，ctime:new新日期()。tolocalstring ()}]完整的用法示例

效果：https://doterlin.github.io/vue-wxChat/

代码：

//主文件，对wxChat的用法做示例模板wxchat :数据=' wxChatData ' :阴影=' false '联系人昵称='简叔： get upper data=' get upper data ' : get undata=' getundata ' : owner tarul=' owner tarul ' : contact avatar URL=' contact avatar URL ' : width=' 420 '/wxChat/template scription wxChat from ' ./components/wx chart。vue ' export default { name : ' app '，data () { return { upperTimes: 0，underTimes: 0，upper rid : 0 0，underId: 6，ownerAvatarUrl: ' ./src/assets/avatar1.png '，contactAvatarUrl: ' ./src/assets/avatar2.png '，wxchatdata :[{ direction : 2，id: 1，type: 1，content: '你好！[呲牙]'，ctime:新日期()。toLocaleString() }，{ direction: 1，id: 2，type: 1，content: '你也好。[害羞]'，ctime:新日期()。toLocaleString() }，{ direction: 2，id: 3，type: 1，content: '这是我的简历头像：'，ctime:新日期()。toLocaleString() }，{ direction: 2，id: 4，type: 2，content: ' ./src/assets/wyz.jpg '，ctime: new Date().toLocaleString() }，{ direction: 1，id: 5，type: 1，content: '你开心就好。[微笑]'，ctime:新日期()。toLocaleString() }] } }，components: { wxChat }，methods:{ //向上滚动加载数据getuperdata(){ var me=this；//这里为模拟异步加载数据//实际上你可能要这么写： //返回axios.get('xxx ').然后（函数（结果){ //返回结果；//结果的格式需要类似下面分解里面的数组//})返回新的承诺(函数(解析){ setTimeout(函数(){ //模拟加载完毕如果(我。upper rtime S3){ return resolve([])；} //加载数据解析([{ direction: 2，id : me。upid-1，type: 1，content: '向上滚动加载第我，上层条！ctime:新日期()。toLocaleString() }，direction: 1，id : me。upid-2，type: 1，content: '向上滚动加载第我，上层条！ctime:新日期()。toLocaleString() }] ) }，1000)；我。起义=我。起义2；me . upertimes })}，getundata(){ var me=this；//意义同getUpperData()返回新的承诺(函数(解析){ setTimeout(函数(){ //模拟加载完毕如果(我。under time 3){ return resolve([])；} //加载数据resolve([{ direction: 1，id: me.underId 1，type: 1，content: '向下滚动加载第我，在时光里条！ctime:新日期()。toLocaleString() }，{ direction: 2，id: me.underId 2，type: 1，content: '向下滚动加载第我，在时光里条！ctime:新日期()。toLocaleString() }] ) }，1000)；我。underid=我。under id 2；我。在时代；})} } }/脚本样式* { margin : 0；padd : 0；}#app { font-family: 'Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}h1、H2 {字体粗细：正常；} ul { list-style-type : no；padd : 0；}li {显示：内联块；}/样式欢迎start:

https://github.com/doterlin/vue-wxChat

总结

以上所述是小编给大家介绍的Vue.js仿微信聊天窗口展示组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！