本文共 4227 字，大约阅读时间需要 14 分钟。

需求：撤回消息

思路

• 鼠标右键弹出 撤回 按钮
• 点击撤回按钮，拿到当前选中消息id，遍历消息列表拿到消息相关数据，主要是拿到用户名
• 通过接口撤回当前消息
• 在撤回成功回调中重新更新列表数据
• 到这里，有两个办法更新列表 办法一、可以通过http刷新消息列表
  办法二、也可以遍历本地消息，用元素替换掉当前消息即可
  办法二效果肯定好一些，毕竟不需要等http回调

一、鼠标右键弹出 撤回 按钮

消息列表

 <li class="tal" v-for="(item,index) in showMesDatas"                                        @contextmenu.prevent="rightMessageClick(item.mid,item.uid)" </li>

右击事件，追加撤回按钮

    //右击事件处理      rightMessageClick(msgId, uid) {           console.log('右击事件');        this.withdrawMessageSmgId = msgId; //保存消息id        if (uid === this.user.userId) {             this.setMsg(msgId);        } else {             return;        }      },      //撤回，删除，取消      handelBackEvent(e, msgId) {           let thisId = e.target.id;        switch (thisId) {             case 'delMsg': //删除消息            this.delMsg(msgId);            break;          case 'withdrawMessage'://撤回消息            this.withdrawMessage(msgId);            break;          case 'cancelBack'://取消            $('#backMsg').remove();            console.log('cancelBack');            break;        }      },      setMsg(num) {           $('#backMsg').remove();        var backMsghtml = '<div id="backMsg" style="position: relative;z-index: 99;margin-right: 15%;">' +            '<span  id="delMsg" style="font-size: 5px;padding: 0;cursor:pointer ;">删除</span>' +            '<span  id="withdrawMessage" style="font-size: 5px;padding: 0;cursor:pointer ;margin: auto 2px">撤回</span>' +            '<span  id="cancelBack" style="font-size: 5px;padding: 0;cursor:pointer ;">取消</span>' +            '</div>';        $('#msg' + num).append(backMsghtml);      },

二、撤回消息，界面处理注意

let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);这是通过websocket处理撤回

我们主要做的是删除消息，追加 let htmld = ' <div class="msgDrowBackContent" style="text-align: center">' + '<div><p></p></div><div>' + msgInfo.una + '撤回了一条消息' + '</div>'; $('#msg' + msgId).append(htmld);

   //撤回消息      withdrawMessage(msgId) {           if (msgId != null && msgId != '') {             function findshowMes(findshowMesDatas) {               for (let i = 0; i < findshowMesDatas.length; i++) {                 if (findshowMesDatas[i].mid == msgId) {                   var msgInfo = findshowMesDatas[i];                return msgInfo;                break;              }            }          }          let msgInfo = findshowMes(this.showMesDatas);          var MsgIndex;//消息编号          var TargetType;//对象类型	Int	0-终端 1-群组 2-调度员 3-临时组          var TargetInfo = {   };//对象信息          if (msgInfo.gid === 0) {               MsgIndex = msgInfo.mid;            TargetType = 0;            TargetInfo = {                 UserID: msgInfo.uid,              UserNumber: this.conversationNumber,              UserName: msgInfo.una,            };          } else {               MsgIndex = msgInfo.mid;            TargetType = 1;            TargetInfo = {                 GroupID: msgInfo.gid,              GroupNumber: this.conversationNumber,              GroupName: msgInfo.gna,            };          }          let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);          if (rspOBJ === 0) {               // Dispatchmessage.backMsg(TargetInfo)      //处理消息撤回后的界面            let deleteMesDatas = this.showMesDatas;            let htmld = ' <div class="msgDrowBackContent" style="text-align: center">' +                '<div><p></p></div><div>' + msgInfo.una + '撤回了一条消息' + '</div>';            $('#msg' + msgId).append(htmld);            for (let i = 0; i < deleteMesDatas.length; i++) {                 if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {                   deleteMesDatas.splice(i, 1);                console.log(deleteMesDatas);                this.withdrawMessageShow = false;                this.showMesDatas = deleteMesDatas;                // this.getTalkHistorys();                $('#backMsg').remove();                break;              }            }          } else {               // Dispatchmessage.backMsg(-1)            // 失败后的处理,参数传入-1            this.withdrawMessageShow = false;            this.$message.warning('撤回失败');            $('#backMsg').remove();          }        } else {             $('#backMsg').remove();        }      },

来看看效果