vue聊天功能模块（九）艾特功能实现

预览

艾特开始

思路：输入ctrl +@ ，弹出群成员列表弹框，点击成员时，把成员名称添加到输入框，同时隐藏弹框

1.点击弹框外任意位置，把弹框关闭即可
2.点击删除键时，把@和名称删掉
3.要实现艾特提示，输入框显示的是“@某某某”，实际发出去的消息，把@某某某转换为我们限定的某字符串，然后收到消息通过字符串匹配即可

下面，我们来一步步实现这功能吧

第一步：shift+2键，弹出群成员列表

输入框绑定messagesContents

<el-input class="inputmsg"type="textarea":rows="3"placeholder="请输入内容"v-model="messagesContents"ref="count"@keydown.native="listen($event)">
</el-input>

监听事件

    listen(event) {var MsgString=this.messagesContents;if(this.conversationType>1){if(event.shiftKey && event.which === 50) {this.ATobj.showATbox = true;}else if(event.which===8) { //删除时，删除名称和@let msgLen = this.messagesMsgString.length;if (this.messagesMsgString[msgLen - 1] === ']' && this.ATobj.del == 1) {for (var i = msgLen; i >= 0; i--) {if (this.messagesMsgString[i] === '[') {if (this.messagesMsgString[i + 1] === '2' && this.messagesMsgString[i + 2] === 'f') {this.messagesMsgString = this.messagesMsgString.substring(0, i);for (var j = MsgString.length - 1; j >= 0; j--) {if (MsgString[j] === '@') {console.log("艾特删除");this.messagesContents = MsgString.substring(0, j + 1);this.ATobj.showATbox = false;break}}}break}}}}}if (event.ctrlKey && event.keyCode === 13) {// if (event.shiftKey && event.keyCode === 13) {console.log('换行');this.messagesContents += '\n';this.messagesMsgString += '\n';} else if (event.keyCode === 13) {event.preventDefault(); // 阻止浏览器默认换行操作*/this.sendMessage(); // 发送文本}},

第二步：选择成员，转换限定字符串

     //艾特选择成员msgAtChooseMember(name,subId){this.ATobj.del = 1;this.messagesMsgString +=this.messagesContents.substring(this.messagesMsgStringLen,this.messagesContents.length-1);this.messagesMsgString+='[2f'+name+'/'+subId+']';//实际发送的消息this.messagesContents += name;//显示的消息内容this.messagesMsgStringLen=this.messagesContents.length;this.ATobj.showATbox = false;},

发送消息

sendMessage() {if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {this.$Message.error('请先选择会话组');return;} else {var obj = {//conversationId  0:调度员 ；1：终端；2：群组 、会话组conversationId: this.saveTalkConversationRecordList.conversationId,name: this.saveTalkConversationRecordList.conversationName,number: this.saveTalkConversationRecordList.conversationNumber,conversationType: this.saveTalkConversationRecordList.conversationType,};console.log(this.saveTalkConversationRecordList);console.log('发送检查11  obj');console.log(obj);if (obj.conversationType === 0) { //调度员         1:终端，-1：调度员，>1:群组obj.conversationType = -1;}if (obj.conversationType == 1) {//终端obj.conversationType = 1;} else if (obj.conversationType == 2) {obj.conversationType = 2;obj.NickName = this.saveTalkConversationRecordList.NickName;}this.messagesMsgString +=this.messagesContents.substring(this.messagesMsgStringLen,this.messagesContents.length);let msgstring = this.messagesMsgString;if (msgstring.length >= 512) {this.$Message.error('发送的消息过长');return;} else if (msgstring.trim() == '') {this.$Message.warning('请不要发送空白消息');return;} else {let user_id = this.user.userId;DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);}}},

收到新消息时，匹配@

这里Parm.SenderUserNickName检测发送人昵称是否为空，为空则以用户名做检测

if(Parm.SenderUserNickName !=''&& Parm.SenderUserNickName !=undefined){if(Parm.TargetInfo.GroupID){let GroupID = Parm.TargetInfo.GroupID;let conList =this.conversationRecordList;let conListLen =this.conversationRecordList.length;for(let s=0;s<conListLen;s++){if(GroupID == conList[s].conversationId ){let at = '[2f'+conList[s].mySelfNickName+'/'+this.$store.getters.userId+']';if(str.indexOf(at) != -1 ){// arr[i].msgString = '<span style="color: red">"+Parm.SenderUserName+"@了你"</span>';arr[a].msgString = '<span > "有人@我"</span>';}else{for (var i = 0; i < str.length; i++) {var x = 0, y = 0, z = 0,str2 = '';for (var j = 0; j < str.length; j++) {if (str[j] === '[') {x = j;}if (str[j] === '/') {y = j;}if (str[j] === ']') {z = j;}if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);}// str = str.replace(/(\r\n|\n|\r)/gm, '<br/>');}}arr[a].msgString = str;}}}}}else{let at = '[2f'+this.$store.getters.userName+'/'+this.$store.getters.userId+']';if(str.indexOf(at) != -1 ){// arr[i].msgString = '<span style="color: red">"+Parm.SenderUserName+"@了你"</span>';// arr[a].msgString = '<span style="color: red"> "有人@我"</span>';arr[a].msgString = '<span > "有人@我"</span>';}else{for (var i = 0; i < str.length; i++) {var x = 0, y = 0, z = 0,str2 = '';for (var j = 0; j < str.length; j++) {if (str[j] === '[') {x = j;}if (str[j] === '/') {y = j;}if (str[j] === ']') {z = j;}if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);}// str = str.replace(/(\r\n|\n|\r)/gm, '<br/>');}}arr[a].msgString = str;}
}

显示处理

这里做的比较简单化，新消息则提示红点，并且艾特我时显示红色样式

    <template v-if="item.newMsgStatus"><template v-if="item.msgString.indexOf('有人@我') != -1 "><div class="messagesBox-left-group-leftContainText-msgString" style="color: red" v-html="item.msgString"></div></template><template v-else><div class="messagesBox-left-group-leftContainText-msgString" v-html="item.msgString"></div></template></template><template v-else><div class="messagesBox-left-group-leftContainText-msgString" v-html="item.msgString"></div></template>

vue聊天功能模块（九）艾特功能实现相关推荐

vue聊天功能模块（四）聊天消息换行
需求:ctrl+回车换行回车发送消息  <div class="messagesBox-BigRight-down20-input"> ...
vue 功能模块后台可配置_Github14k的Springboot后台管理系统
关注爱编码.挖掘优秀项目. 本期给各位带来的一款优质的后台管理系统:EL-ADMIN 后台管理系统. 简介该项目由大神elunez一手大打造.它是一个基于 Spring Boot 2.1.0 . S ...
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
前言最近刚好在做这方面的功能,就网上看了下,发现很多种写法,但是有些写的很乱, 我也看的很麻烦,干脆就自己写一个简单的静态版本放在这, 以后需要用到的时候可以直接拿着改改就能用. 后面我还会继续更新 ...
ERP初阶（九）：ERP的主要功能模块简介
ERP初阶(九):ERP的主要功能模块简介 (by AMT ERP研究小组) 对于ERP原理的初步了解是我们认识ERP的基础,接下来,为了使大家对ERP产品有一个感性的认识,我们就要从它的功能上再给予 ...
Vue Cli 3项目使用融云IM实现聊天功能
介绍:前台使用vue+vant开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程 ...
YOLOV4各个创新功能模块技术分析（三）
YOLOV4各个创新功能模块技术分析(三) 八.数据增强相关-Stylized-ImageNet 论文名称:ImageNet-trained cnns are biased towards textu ...
boost::math模块计算艾里函数的零点的测试程序
boost::math模块计算艾里函数的零点的测试程序实现功能 C++实现代码实现功能 boost::math模块计算艾里函数的零点的测试程序 C++实现代码 #ifdef _MSC_VER # ...
[系统安全] 四十五.APT系列(10)Metasploit后渗透技术信息收集、权限提权和功能模块详解
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
lin-cms-dotnetcore功能模块的设计
先来回答以下问题. 1.什么是cms? Content Management System,内容管理系统. 2.dotnetcore是什么? .NET Core,是由Microsoft开发,目前在.N ...