Maison > Article > interface Web > Comment implémenter l'interface de chat dans vuejs

Comment implémenter l'interface de chat dans vuejs

藏色散人original: 2021-09-24 16:43:053929parcourir

Comment implémenter l'interface de chat dans vuejs : 1. Installez les dépendances en exécutant "npm install" ; 2. Implémentez le chargement par défilement des données via "scrollLoader.vue" ; 3. Modifiez main.js 4. Définissez les paramètres dans l'application ; .vue peut.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment implémenter l'interface de chat dans vuejs ?

Vue.js imite la fonction du composant d'affichage de la fenêtre de discussion WeChat

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

Adresse de démonstration : 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

Introduction

prend en charge l'affichage du texte et des images (l'affichage des catégories vocales sera pris en charge à l'avenir).
Prend en charge le chargement par défilement des données, dans lequel le chargement par défilement repose sur un autre de mes composants, scrollLoader.vue ("Composant de chargement par défilement haut et bas Vue.js").
Supporte les émoticônes QQ. Afin d'utiliser les émoticônes, veuillez enregistrer la commande v-emotion globalement. Je l'ai implémentée dans main.js ; le code est le suivant :

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)
 }
});

Comment l'utiliser ?

Les paramètres ont été définis dans le composant Description et démontrés dans App.vue :

Paramètres et description :

Composant visuel du chat WeChat

dépend du composant scrollLoader, qui dépend de l'instruction v-emotion (voir main.js pour la mise en œuvre)

paramètres ：

largeur du composant, par défaut 450

wrapBg couleur d'arrière-plan de l'élément parent externe, par défaut #efefef

maxHeight hauteur maximale de la fenêtre d'affichage, par défaut 900

contactAvatarUrl URL de l'avatar de l'ami

OwnerAvatarUrl URL de l'avatar du propriétaire de WeChat

ownerNickname Surnom du propriétaire de WeChat

getUpperData (obligatoire) Une méthode pour charger les données lors du défilement vers le haut. La valeur de retour doit être un objet Promise. La structure de résolution est la même que celle de data

getUnderData (. requis) Une méthode de chargement des données lors du défilement vers le bas. La valeur de retour est la même que ci-dessus

data (obligatoire) Transmettez les données d'initialisation, la structure est la suivante :

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

Exemple d'utilisation complet

La dernière sélection de 5 tutoriels vidéo vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment masquer l'élément actuel dans vuejsArticle suivant：Comment masquer l'élément actuel dans vuejs

Articles Liés

Voir plus