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 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Prototype Array对象 学习
2009/07/19 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
python函数缺省值与引用学习笔记分享
2013/02/10 Python
介绍Python中的__future__模块
2015/04/27 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
pandas 将索引值相加的方法
2018/11/15 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
物理专业大学生职业生涯规划书
2014/02/07 职场文书
三字经教学反思
2014/04/26 职场文书
应届毕业生自荐信
2014/05/28 职场文书
先进个人总结范文
2015/02/15 职场文书
承诺保证书格式
2015/02/28 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android