How to implement chat interface in vuejs-Vue.js-php.cn

How to implement the chat interface in vuejs: 1. Install dependencies by executing "npm install"; 2. Implement scrolling loading of data through "scrollLoader.vue"; 3. Modify main.js; 4. Set App.vue The parameters in can be used.

How to implement chat interface in vuejs

The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.

How to implement chat interface in vuejs?

Vue.js imitation WeChat chat window display component function

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

Demo address: https://doterlin.github.io/vue-wxChat/

Run

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

Copy after login

Introduction

supports the display of text and pictures (the display of voice categories will be supported in the future).
Supports scrolling loading of data, in which scrolling loading relies on another component of mine, scrollLoader.vue ("Vue.js up and down scrolling loading component").
Support QQ emoticons. In order to use emoticons, please register the command v-emotion globally. I implemented it in main.js; the code is as follows:

function toEmotion(text, isNoGif){
 var list = [&#39;微笑&#39;, &#39;撇嘴&#39;, &#39;色&#39;, &#39;发呆&#39;, &#39;得意&#39;, &#39;流泪&#39;, &#39;害羞&#39;, &#39;闭嘴&#39;, &#39;睡&#39;, &#39;大哭&#39;, &#39;尴尬&#39;, &#39;发怒&#39;, &#39;调皮&#39;, &#39;呲牙&#39;, &#39;惊讶&#39;, &#39;难过&#39;, &#39;酷&#39;, &#39;冷汗&#39;, &#39;抓狂&#39;, &#39;吐&#39;, &#39;偷笑&#39;, &#39;愉快&#39;, &#39;白眼&#39;, &#39;傲慢&#39;, &#39;饥饿&#39;, &#39;困&#39;, &#39;惊恐&#39;, &#39;流汗&#39;, &#39;憨笑&#39;, &#39;大兵&#39;, &#39;奋斗&#39;, &#39;咒骂&#39;, &#39;疑问&#39;, &#39;嘘&#39;, &#39;晕&#39;, &#39;折磨&#39;, &#39;衰&#39;, &#39;骷髅&#39;, &#39;敲打&#39;, &#39;再见&#39;, &#39;擦汗&#39;, &#39;抠鼻&#39;, &#39;鼓掌&#39;, &#39;糗大了&#39;, &#39;坏笑&#39;, &#39;左哼哼&#39;, &#39;右哼哼&#39;, &#39;哈欠&#39;, &#39;鄙视&#39;, &#39;委屈&#39;, &#39;快哭了&#39;, &#39;阴险&#39;, &#39;亲亲&#39;, &#39;吓&#39;, &#39;可怜&#39;, &#39;菜刀&#39;, &#39;西瓜&#39;, &#39;啤酒&#39;, &#39;篮球&#39;, &#39;乒乓&#39;, &#39;咖啡&#39;, &#39;饭&#39;, &#39;猪头&#39;, &#39;玫瑰&#39;, &#39;凋谢&#39;, &#39;示爱&#39;, &#39;爱心&#39;, &#39;心碎&#39;, &#39;蛋糕&#39;, &#39;闪电&#39;, &#39;炸弹&#39;, &#39;刀&#39;, &#39;足球&#39;, &#39;瓢虫&#39;, &#39;便便&#39;, &#39;月亮&#39;, &#39;太阳&#39;, &#39;礼物&#39;, &#39;拥抱&#39;, &#39;强&#39;, &#39;弱&#39;, &#39;握手&#39;, &#39;胜利&#39;, &#39;抱拳&#39;, &#39;勾引&#39;, &#39;拳头&#39;, &#39;差劲&#39;, &#39;爱你&#39;, &#39;NO&#39;, &#39;OK&#39;, &#39;爱情&#39;, &#39;飞吻&#39;, &#39;跳跳&#39;, &#39;发抖&#39;, &#39;怄火&#39;, &#39;转圈&#39;, &#39;磕头&#39;, &#39;回头&#39;, &#39;跳绳&#39;, &#39;挥手&#39;, &#39;激动&#39;, &#39;街舞&#39;, &#39;献吻&#39;, &#39;左太极&#39;, &#39;右太极&#39;, &#39;嘿哈&#39;, &#39;捂脸&#39;, &#39;奸笑&#39;, &#39;机智&#39;, &#39;皱眉&#39;, &#39;耶&#39;, &#39;红包&#39;, &#39;鸡&#39;];
 if (!text) {
  return text;
 }
 text = text.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi, function(word){
  var newWord = word.replace(/\[|\]/gi,&#39;&#39;);
  var index = list.indexOf(newWord);
  var backgroundPositionX = -index * 24
  var imgHTML = &#39;&#39;;
  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 ? &#39;/img&#39; : &#39;https://res.wx.qq.com/mpres/htmledition/images/icon&#39;;
   imgHTML = `![](${path}/emotion/${index}.gif)`
  }
  return imgHTML;
 });
 return text;
}
Vue.directive(&#39;emotion&#39;, {
 bind: function (el, binding) {
  el.innerHTML = toEmotion(binding.value)
 }
});

Copy after login

How to use?

The parameters have been described in the component and demonstrated in App.vue:

Parameters and descriptions:

WeChat chat visual component

Depends on the scrollLoader component and the instruction v-emotion (please see main.js for implementation)

Parameters:

width component width, default 450

wrapBg outer parent element background color, default #efefef

maxHeight is the maximum height of the display window, default is 900

contactAvatarUrl friend avatar url

ownerAvatarUrl WeChat owner avatar url

ownerNickname WeChat owner nickname

getUpperData (required) A method to load data when scrolling to the top. The return value must be a Promise object. The structure of resolve is the same as data

getUnderData (required). A method to load data when scrolling to the bottom. The return value is the same as above

data (required) Pass in initialization data, the structure is as follows:

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

Copy after login

Complete usage example

Effect: https://doterlin.github .io/vue-wxChat/

Code:

//主文件，对wxChat的用法做示例
<template>
<wxChat 
 :data="wxChatData"
 :showShade="false"
 contactNickname="简叔"
 :getUpperData="getUpperData"
 :getUnderData="getUnderData"
 :ownerAvatarUrl="ownerAvatarUrl"
 :contactAvatarUrl="contactAvatarUrl"
 :width="420">
</wxChat>
</template>
<script>
import wxChat from &#39;./components/wxChat.vue&#39;
export default {
 name: &#39;app&#39;,
 data () {
 return {
  upperTimes: 0,
  underTimes: 0,
  upperId: 0,
  underId: 6,
  ownerAvatarUrl: &#39;./src/assets/avatar1.png&#39;,
  contactAvatarUrl: &#39;./src/assets/avatar2.png&#39;,
  wxChatData: [{
  direction: 2,
  id: 1,
  type: 1,
  content: &#39;你好!![呲牙]&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 2,
  type: 1,
  content: &#39;你也好。[害羞]&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 3,
  type: 1,
  content: &#39;这是我的简历头像：&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 2,
  id: 4,
  type: 2,
  content: &#39;./src/assets/wyz.jpg&#39;,
  ctime: new Date().toLocaleString()
  },
  {
  direction: 1,
  id: 5,
  type: 1,
  content: &#39;你开心就好。[微笑]&#39;,
  ctime: new Date().toLocaleString()
  }]
 }
 },
 components:{wxChat},
 methods:{
 //向上滚动加载数据
 getUpperData(){
  var me = this;
  // 这里为模拟异步加载数据
  // 实际上你可能要这么写:
  // return axios.get(&#39;xxx&#39;).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: &#39;向上滚动加载第 &#39; + me.upperTimes +&#39; 条！&#39;,
    ctime: new Date().toLocaleString()
   },
   {
    direction: 1,
    id: me.upperId-2,
    type: 1,
    content: &#39;向上滚动加载第 &#39; + me.upperTimes +&#39; 条！&#39;,
    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: &#39;向下滚动加载第 &#39; + me.underTimes +&#39; 条！&#39;,
    ctime: new Date().toLocaleString()
   },
   {
    direction: 2,
    id: me.underId+2,
    type: 1,
    content: &#39;向下滚动加载第 &#39; + me.underTimes +&#39; 条！&#39;,
    ctime: new Date().toLocaleString()
   }]
   )
  }, 1000);
  me.underId = me.underId+2;
  me.underTimes++;
  })
 }
 }
}
</script>
<style>
*{
 margin: 0;
 padding: 0;
}
#app {
 font-family: &#39;Avenir&#39;, 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>

Copy after login

Welcome to start:

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

Recommended: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to implement chat interface in vuejs. For more information, please follow other related articles on the PHP Chinese website!