预览
艾特开始
思路:输入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>