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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
JS排序之选择排序详解
Apr 08 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
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定期拉取数据对比方法实例
2019/09/22 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue基于element的区间选择组件
2018/09/07 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python 判断自定义对象类型
2009/03/21 Python
python发送邮件功能实现代码
2016/07/15 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python将视频转换为全字符视频
2019/04/26 Python
详解Django CAS 解决方案
2019/10/30 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
校园歌咏比赛主持词
2014/03/18 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
四年级语文教学反思
2016/03/03 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python