Maison >interface Web >Voir.js >Comment implémenter l'interface de chat dans vuejs
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
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) } });
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: '你好!![呲牙]', //当type为1时这里是文本消息,当type2为2时这里要存放图片地址;后续会支持语音的显示 ctime: new Date().toLocaleString() //显示当前消息的发送时间 }, { direction: 1, id: 2, type: 1, content: '你也好。[害羞]', 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!