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


Posted in Javascript onAugust 11, 2017

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

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

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

运行

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build

介绍

  • 支持文本和图片的展示(后续将支持对语音类的展示)。
  • 支持滚动加载数据,其中滚动加载依赖我另外一个组件scrollLoader.vue(《Vue.js上下滚动加载组件》)。
  • 支持QQ表情,为了能使用表情请全局注册指令v-emotion,我在main.js做了实现;代码如下:
function toEmotion(text, isNoGif){
 var list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极', '嘿哈', '捂脸', '奸笑', '机智', '皱眉', '耶', '红包', '鸡'];
 if (!text) {
  return text;
 }
 text = text.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi, function(word){
  var newWord = word.replace(/\[|\]/gi,'');
  var index = list.indexOf(newWord);
  var backgroundPositionX = -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/htmledition/images/icon/emotion/default218877.gif) ${backgroundPositionX}px 0;"></i>`
  } else {
   var path = index>104 ? '/img' : 'https://res.wx.qq.com/mpres/htmledition/images/icon';
   imgHTML = `![](${path}/emotion/${index}.gif)`
  }
  return imgHTML;
 });
 return text;
}
Vue.directive('emotion', {
 bind: function (el, binding) {
  el.innerHTML = toEmotion(binding.value)
 }
});

如何使用?

参数已经在组件中做了说明,并在App.vue中做了演示:

参数和说明:

微信聊天可视化组件

依赖scrollLoader组件, 依赖指令v-emotion(实现请查看main.js)

参数:

width 组件宽度,默认450

wrapBg 外层父元素背景颜色,默认#efefef

maxHeight 展示窗口最高高度, 默认900

contactAvatarUrl 好友头像url

ownerAvatarUrl 微信主人头像url

ownerNickname 微信主人昵称

getUpperData (必需)当滚动到上方时加载数据的方法,返回值要为Promise对象,resolve的结构同data

getUnderData (必需)当滚动到下方时加载数据的方法,返回值同上

data (必需)传入初始化数据, 结构如下:

[{
 direction: 2, //为2表示微信主人发出的消息,1表示联系人
 id: 1, //根据这个来排序消息
 type: 1, //1为文本,2为图片
 content: '你好!![呲牙]', //当type为1时这里是文本消息,当type2为2时这里要存放图片地址;后续会支持语音的显示
 ctime: new Date().toLocaleString() //显示当前消息的发送时间
},
{
 direction: 1,
 id: 2,
 type: 1,
 content: '你也好。[害羞]',
 ctime: new Date().toLocaleString()
}]

完整的使用实例

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

代码:

//主文件,对wxChat的用法做示例
<template>
<wxChat 
 :data="wxChatData"
 :showShade="false"
 contactNickname="简叔"
 :getUpperData="getUpperData"
 :getUnderData="getUnderData"
 :ownerAvatarUrl="ownerAvatarUrl"
 :contactAvatarUrl="contactAvatarUrl"
 :width="420">
</wxChat>
</template>
<script>
import wxChat from './components/wxChat.vue'
export default {
 name: 'app',
 data () {
 return {
  upperTimes: 0,
  underTimes: 0,
  upperId: 0,
  underId: 6,
  ownerAvatarUrl: './src/assets/avatar1.png',
  contactAvatarUrl: './src/assets/avatar2.png',
  wxChatData: [{
  direction: 2,
  id: 1,
  type: 1,
  content: '你好!![呲牙]',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 2,
  type: 1,
  content: '你也好。[害羞]',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 3,
  type: 1,
  content: '这是我的简历头像:',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 4,
  type: 2,
  content: './src/assets/wyz.jpg',
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 5,
  type: 1,
  content: '你开心就好。[微笑]',
  ctime: new Date().toLocaleString()
  }]
 }
 },
 components:{wxChat},
 methods:{
 //向上滚动加载数据
 getUpperData(){
  var me = this;
  // 这里为模拟异步加载数据
  // 实际上你可能要这么写:
  // return axios.get('xxx').then(function(result){
  //  return result; //result的格式需要类似下面resolve里面的数组
  // })
  return new Promise(function(resolve){
  setTimeout(function(){
   //模拟加载完毕
   if(me.upperTimes>3){
   return resolve([]);
   }
   //加载数据
   resolve([{
    direction: 2,
    id: me.upperId-1,
    type: 1,
    content: '向上滚动加载第 ' + me.upperTimes +' 条!',
    ctime: new Date().toLocaleString()
   },
   {
    direction: 1,
    id: me.upperId-2,
    type: 1,
    content: '向上滚动加载第 ' + me.upperTimes +' 条!',
    ctime: new Date().toLocaleString()
   }]
   )
  }, 1000);
  me.upperId= me.upperId+2;
  me.upperTimes++;
  })
 },
 getUnderData(){
  var me = this;
  //意义同getUpperData()
  return new Promise(function(resolve){
  setTimeout(function(){
   //模拟加载完毕
   if(me.underTimes>3){
   return resolve([]);
   }
   //加载数据
   resolve(
   [{
    direction: 1,
    id: me.underId+1,
    type: 1,
    content: '向下滚动加载第 ' + me.underTimes +' 条!',
    ctime: new Date().toLocaleString()
   },
   {
    direction: 2,
    id: me.underId+2,
    type: 1,
    content: '向下滚动加载第 ' + me.underTimes +' 条!',
    ctime: new Date().toLocaleString()
   }]
   )
  }, 1000);
  me.underId = me.underId+2;
  me.underTimes++;
  })
 }
 }
}
</script>
<style>
*{
 margin: 0;
 padding: 0;
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
}
</style>

欢迎 start:

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

总结

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

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
node.js中的console用法总结
Dec 15 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 #Javascript
JS SetInterval 代码实现页面轮询
Aug 11 #Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 #Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 #Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 #Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 #Javascript
JS非空验证及邮箱验证的实例
Aug 11 #Javascript
You might like
数字转英文
2006/12/06 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
javascript中简单的进制转换代码实例
2013/10/26 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python异步Web框架sanic的实现
2020/04/27 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
python实现视频压缩功能
2020/12/18 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
项目副经理岗位职责
2013/12/30 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
工作评语大全
2014/04/26 职场文书
求职信名称怎么写
2014/05/26 职场文书
合作意向协议书
2015/01/29 职场文书
财务工作个人总结
2015/02/27 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis