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 相关文章推荐
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
js实现简单锁屏功能实例
May 27 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
js页面加载后执行的几种方式小结
Jan 30 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
1.PHP简介
2006/10/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
JavaScript实现动态生成表格
2020/08/02 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
Python中list初始化方法示例
2016/09/18 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python常见的pandas用法demo示例
2019/03/16 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
超市收银员岗位职责
2015/04/07 职场文书
详解python字符串驻留技术
2021/05/21 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏