预览

艾特开始

思路：输入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>