So implementieren Sie die Chat-Schnittstelle in VueJS

So implementieren Sie die Chat-Schnittstelle in vuejs: 1. Installieren Sie Abhängigkeiten, indem Sie „npm install“ ausführen. 2. Implementieren Sie das Scrollen von Daten über „scrollLoader.vue“. 4. Legen Sie die Parameter in App fest .vue. Kann.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie implementiert man eine Chat-Schnittstelle in VueJS?

Vue.js imitiert die Funktion der WeChat-Chatfenster-Anzeigekomponente

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

Demo-Adresse: 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

Einführung

• unterstützt die Anzeige von Text und Bildern (die Anzeige von Sprachkategorien wird in Zukunft unterstützt).
• Unterstützt das scrollende Laden von Daten, wobei das scrollende Laden auf einer anderen meiner Komponenten basiert, scrollLoader.vue („Vue.js nach oben und unten scrollende Ladekomponente“).
• Unterstützen Sie QQ-Emoticons. Bitte registrieren Sie den Befehl v-emotion global. Der Code lautet wie folgt:

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 ? &#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)
 }
});

Wie wird er verwendet? Die Parameter wurden in der Komponentenbeschreibung festgelegt und in demonstriert:

Parameter und Beschreibung:

App.vue

Visuelle WeChat-Chat-Komponente

hängt von der scrollLoader-Komponente ab, die von der Anweisung v-emotion abhängt (siehe main.js für die Implementierung)

Parameter:

width Komponentenbreite, Standard 450wrapBg Hintergrundfarbe des äußeren übergeordneten Elements, Standard #efefef

maxHeight maximale Höhe des Anzeigefensters, Standard 900

contactAvatarUrl Freund-URL

ownerAvatarUrl WeChat-Besitzer-Avatar-URL

ownerNickname WeChat-Besitzer-Spitzname

getUpperData (erforderlich) Eine Methode zum Laden von Daten beim Scrollen nach oben. Der Rückgabewert muss ein Promise-Objekt sein. erforderlich) Eine Methode zum Laden von Daten beim Scrollen nach unten. Der Rückgabewert ist derselbe wie oben

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

Code:

[{
 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()
}]

Willkommen zum Start:

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

Empfohlen: " Die neueste Auswahl von 5 vue.js-Video-Tutorials"

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Chat-Schnittstelle in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!