精华内容
下载资源
问答
  • vue显示消息提示框功能

    千次阅读 2019-10-12 11:48:36
    vue显示消息提示框功能 效果图 如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> ....

    vue显示消息提示框功能

    效果图 如下所示
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		.toast {
    			position: fixed;
    			z-index: 2000;
    			left: 50%;
    			top: 45%;
    			transition: all .5s;
    			-webkit-transform: translateX(-50%) translateY(-50%);
    			-moz-transform: translateX(-50%) translateY(-50%);
    			-ms-transform: translateX(-50%) translateY(-50%);
    			-o-transform: translateX(-50%) translateY(-50%);
    			transform: translateX(-50%) translateY(-50%);
    			text-align: center;
    			border-radius: 5px;
    			color: #FFF;
    			background: rgba(17, 17, 17, 0.7);
    			height: 45px;
    			line-height: 45px;
    			padding: 0 15px;
    			max-width: 150px;
    		}
    	</style>
    	<body>
    		<!-- 提示框 -->
    		<div id="app">
    			<div @click="binxs">
    				{{username}}
    			</div>
    			<div class="toast" v-show="toastShow">
    				{{toastText}}
    			</div>
    		</div> 
    		<script src="../js/vue.js" type="text/javascript" charset="utf-8">
    		</script>
    		<script>
    			const obj = {
    				toastShow: false,
    				toastText: '',
    				username: '显示消息提示框'
    			}
    			const app = new Vue({
    				el: '#app',
    				data: obj,
    				methods: {
    					toast(str) {
    						let v = this
    						v.toastText = str
    						v.toastShow = true
    						setTimeout(function() {
    							v.toastShow = false
    						}, 1500)
    					},
    					binxs: function(e) {
    						this.toast('显示成功')
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    有什么问题欢迎评论留言,我会及时回复你的

    展开全文
  • 注意:转发对象可为当前聊天对象,转发成功后需判断是否是存在转发当前聊天,是的话把消息数据显示 转发右击列表 <Dropdown style="z-index:9999999!important;" ref="contentMenuMessageRight" trigger=...

    效果

    在这里插入图片描述
    在这里插入图片描述

    1、右击弹出列表,同时保存消息id
    2、选择转发成员,转发即可
    注意:转发对象可为当前聊天对象,转发成功后需判断是否是存在转发当前聊天,是的话把消息数据显示

    右击事件处理

    在这里插入图片描述

     //右击事件处理
          rightMessageClick(e, msgId, uid) {
            console.log('右击事件');
            this.withdrawMessageSmgId = msgId; //保存消息id
            this.withdrawMessageuid = uid; //保存消息id
            this.withdrawMessageShowDropdown = true;
            this.MsgcontextmenuRight(e);
          },
          MsgcontextmenuRight(event) {
            event.preventDefault();
            this.$refs.contentMenuMessageRight.$refs.reference = event.target;
           
            this.$refs.contentMenuMessageRight.currentVisible = !this.$refs.contentMenuMessageRight.currentVisible;
          },
    

    转发右击列表

     <Dropdown style="z-index:9999999!important;" ref="contentMenuMessageRight"
                                              trigger="click"
                                              v-show="withdrawMessageShowDropdown"
    @on-click="(name) => dblclickRihtMsgListCommand(name)">
    <DropdownMenu style="z-index:9999999!important;" slot="list">
       <template>
           <template v-if="user.userId ==withdrawMessageuid">
               <DropdownItem name="withdrawMessage">撤回</DropdownItem>
           </template>
           <DropdownItem id="handleOutOtherId" name="handleOutOther">转发</DropdownItem>
           <DropdownItem name="delMsg">删除</DropdownItem>
       </template>
       <DropdownItem name="cancelBack">取消</DropdownItem>
    </DropdownMenu>
    </Dropdown>
    

    转发弹框

    <!--转发选人弹框-->
                    <div v-show="forwardObj.showForwardObjDialog" class="msgHandleOutCtl">
                        <div id="msgHandleOutBoxMoveId" class="msgHandleOutBoxMove">
    
                        </div>
                        <div id="msgHandleOutBoxId" class="msgHandleOutBox">
    
                            <div class="msgHandleOutBox-left">
                                <div class="msgHandleOutBox-left-up">
                                    <div class="msgHandleOutBox-left-upBox">
                                        <el-input placeholder="请输入搜索内容" v-model="forwardObj.conversationName">
                                            <el-button slot="append" icon="el-icon-search"
                                                       @click="handleStartOutMsgqueryConversationRecordList"></el-button>
                                        </el-input>
                                    </div>
    
                                </div>
                                <div class="msgHandleOutBox-left-down">
                                    <div class="msgHandleOutBox-left-downContainer">
                                        <div class="msgHandleOutBox-left-downItem"
                                             v-for="(item,index) in forwardObj.forwardConversationRecordList" :key="index">
                                            <div class="msgHandleOutBox-left-downItem01">
                                                <div class="msgHandleOutBox-left-downItem01Box">
                                                    <div class="msgHandleOutBox-left-downItem01BoxCtl">
                                                        <template
                                                                v-if="item.conversationType ===1 ||item.conversationType ===0">
                                                            <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                                 src="@/assets/icons/messages/memberLeft.png"
                                                                 alt="">
                                                        </template>
                                                        <template
                                                                v-if="item.conversationType ===2 || item.conversationType ===3">
                                                            <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                                 src="@/assets/icons/messages/groupLeft.png"
                                                                 alt="">
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="msgHandleOutBox-left-downItem02">
                                                <div class="msgHandleOutBox-left-downItem02Box">
                                                    <div class="msgHandleOutBox-left-downItem02BoxCtl">
                                                        <span class="msgHandleOutBox-left-downItem02BoxCtlText">{{item.name}}</span>
                                                    </div>
                                                </div>
    
                                            </div>
                                            <div class="msgHandleOutBox-left-downItem03">
                                                <div class="msgHandleOutBox-left-downItem03Box">
                                                    <div class="msgHandleOutBox-left-downItem03BoxCtl">
                                                        <!-- <el-button size="mini"
                                                                    class="msgHandleOutBox-left-downItem03BoxCtlBtn"
                                                                    type="primary"
                                                                    @click="handleChooseConversationRecordList(item.conversationId,item)">
                                                             添加
                                                         </el-button>-->
                                                        <template v-if="item.chooseStatus ==1">
                                                            <img @click="handleChooseConversationRecordList(item.conversationId,item)"
                                                                 class="msgHandleOutBox-hanChooseBoxImg"
                                                                 src="@/assets/icons/messages/hanChoose.png"
                                                                 alt="">
                                                        </template>
                                                        <template v-else>
                                                            <img @click="handleChooseConversationRecordList(item.conversationId,item)"
                                                                 class="msgHandleOutBox-hanChooseBoxImg"
                                                                 src="@/assets/icons/messages/noChoose.png"
                                                                 alt="">
                                                        </template>
                                                    </div>
                                                </div>
    
                                            </div>
    
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="msgHandleOutBoxRightId" class="msgHandleOutBox-right">
                                <div class="msgHandleOutBox-right-up">
                                    <div class="msgHandleOutBox-right-upOne">
                                        <div class="msgHandleOutBox-right-upOne-img" @click="closeShowForwardObjDialog">
                                            <img class="msgHandleOutBox-right-upOne-imgStyle"
                                                 src="@/assets/icons/messages/handleOutMsg/shoutRight.png" alt="">
                                        </div>
    
                                    </div>
                                    <div class="msgHandleOutBox-right-upTwo">
                                        <div class="msgHandleOutBox-right-one">
                                            <span class="msgHandleOutBox-right-oneText">分别转发给:</span>
                                        </div>
                                        <div class="msgHandleOutBox-right-two">
                                            <span v-if="forwardObj.chooseConversationRecordList.length ===0"
                                                  class="msgHandleOutBox-right-twoText">未选择聊天</span>
                                            <span v-else class="msgHandleOutBox-right-twoText">已选择{{forwardObj.chooseConversationRecordList.length}}个聊天</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="msgHandleOutBox-right-center">
                                    <div class="msgHandleOutBox-right-center-Container">
                                        <div class="msgHandleOutBox-right-centerItem"
                                             v-for="(item,index) in forwardObj.chooseConversationRecordList" :key="index">
                                            <div class="msgHandleOutBox-right-centerItem01">
                                                <div class="msgHandleOutBox-right-centerItem01Box">
                                                    <div class="msgHandleOutBox-right-centerItem01BoxCtl">
                                                        <template
                                                                v-if="item.conversationType ===1 ||item.conversationType ===0">
                                                            <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                                 src="@/assets/icons/messages/memberLeft.png"
                                                                 alt="">
                                                        </template>
                                                        <template
                                                                v-if="item.conversationType ===2 || item.conversationType ===3">
                                                            <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                                 src="@/assets/icons/messages/groupLeft.png"
                                                                 alt="">
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="msgHandleOutBox-right-centerItem02">
                                                <div class="msgHandleOutBox-right-centerItem02Box">
                                                    <div class="msgHandleOutBox-right-centerItem02BoxName">
                                                        <span class="msgHandleOutBox-right-centerItem02BoxNameText">{{item.name}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="msgHandleOutBox-right-centerItem03">
                                                <div id="handleDeleteConversationRecordListId"
                                                     class="msgHandleOutBox-right-centerItem03Box"
                                                     @click="handleDeleteConversationRecordList(item.conversationId)">
                                                    <div class="msgHandleOutBox-right-centerItem03BoxCtl"><img
                                                            class="msgHandleOutBox-right-centerItem03BoxImg"
                                                            src="@/assets/icons/messages/handleOutMsg/shoutRight.png"
                                                            alt="">
                                                    </div>
                                                </div>
                                            </div>
    
                                        </div>
                                    </div>
                                </div>
                                <div class="msgHandleOutBox-right-down">
                                    <div class="msgHandleOutBox-right-downOne">
                                        <template v-if="forwardObj.chooseConversationRecordList ==0">
                                            <div class="msgHandleOutBox-right-downOneBtnNoDatas">
                                                <span class="msgHandleOutBox-right-downOneBtnText">发送</span>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="msgHandleOutBox-right-downOneBtn" @click="handleSendForward">
                                                <span class="msgHandleOutBox-right-downOneBtnText">发送</span>
                                            </div>
                                        </template>
    
    
                                    </div>
                                    <div class="msgHandleOutBox-right-downTwo">
                                        <div class="msgHandleOutBox-right-downTwoBtn" @click="closeShowForwardObjDialog">
                                            <span class="msgHandleOutBox-right-downTwoBtnText">取消</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                        </div>
                    </div>
    

    右击确认

    dblclickRihtMsgListCommand(name) {
            let msgId = this.withdrawMessageSmgId;
            switch (name) {
              case 'withdrawMessage'://撤回
                this.withdrawMessage(msgId);
                break;
              case 'handleOutOther'://转发
                this.handleStartOutMsg(msgId);
                break;
              case 'delMsg'://删除
                this.delMsg(msgId);
                break;
              case 'cancelBack'://取消
                this.withdrawMessageShowDropdown = false;
                break;
            }
          },
    

    转发弹框,支持拖动

     //转发消息
          handleStartOutMsg(msgId) {
            this.handleStartOutMsgqueryConversationRecordList();
            this.forwardObj.showForwardObjDialog = true;
            $('.msgHandleOutCtl').Tdrag(
                {
                  // scope: '#app',
                  handle: '#msgHandleOutBoxMoveId',
                },
            );
            if (msgId != null && msgId != '') {
              console.log('当前选中消息对象' + msgId);
              let MesDatas = this.showMesDatas;
              for (let i = 0; i < MesDatas.length; i++) {
                if (JSON.stringify(MesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                  this.forwardObj.saveCourentMsgDataObj = MesDatas[i];//保存消息数据
                  break;
                }
              }
            }
          },
    

    获取转发弹框会话列表

     //获取转发弹框会话列表
          handleStartOutMsgqueryConversationRecordList(params) {
            params = params || null;
            MessageApi.queryConversationRecordList({
              userId: this.user.userId,//
              userType: 0,
              conversationName: this.forwardObj.conversationName
              ,
            }).then(res => {
              // 返回数据
    
              //定义保存会话数组对象
              let newConversationRecordList = res.obj;
              let choose = this.forwardObj.chooseConversationRecordList;
              // this.forwardObj.forwardConversationRecordList = res.obj;
              if (this.forwardObj.forwardConversationRecordList.length <= 0 && choose.length == 0) {
                for (let a = 0; a < newConversationRecordList.length; a++) {
                  newConversationRecordList[a]['chooseStatus'] = 0;
                }
    
              } else {
                //原来保存的会话列表,有的可能有勾选
                // let oldConversationRecordList = this.forwardObj.forwardConversationRecordList;
                let oldConversationRecordList = choose;
                for (let a = 0; a < newConversationRecordList.length; a++) {
                  //两者相对比,重置状态
                  for (let i = 0; i < oldConversationRecordList.length; i++) {
                    if (oldConversationRecordList[i].conversationId == newConversationRecordList[a].conversationId) {
                      newConversationRecordList[a]['chooseStatus'] = 1;
                    } else {
                      newConversationRecordList[a]['chooseStatus'] = 0;
                    }
                  }
                }
              }
              this.forwardObj.forwardConversationRecordList = newConversationRecordList;
            }).catch(err => {
              // 异常情况
            });
          },
    

    添加和删除转发对象

     //添加到转发
          handleChooseConversationRecordList(conversationId, item) {
            // 检测数组
            function isHasObj(arr, val) {
              var flag = false; // true为有 false为没有
              for (var i = 0; i < arr.length; i++) {
                if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) {
                  flag = true;
                }
              }
              return flag;
            }
    
            /* var keyIndex = isHasObj(this.forwardObj.chooseConversationRecordList, conversationId);
             if (keyIndex) {
               this.$message('已经存在');
             } else {
               this.forwardObj.chooseConversationRecordList.push(item);
             }*/
            let choose = this.forwardObj.chooseConversationRecordList;
            for (let i = 0; i < this.forwardObj.forwardConversationRecordList.length; i++) {
              if (this.forwardObj.forwardConversationRecordList[i].conversationId == conversationId) {
                if (this.forwardObj.forwardConversationRecordList[i].chooseStatus == 1) {
                  this.forwardObj.forwardConversationRecordList[i].chooseStatus = 0;
                  for (let j = 0; j < choose.length; j++) {
                    if (choose[j].conversationId == conversationId) {
                      choose.splice(j, 1);
                    }
                  }
                } else {
                  this.forwardObj.forwardConversationRecordList[i].chooseStatus = 1;
                  this.forwardObj.chooseConversationRecordList.push(item);
                }
              }
            }
            this.forwardObj.chooseConversationRecordList = choose;
    
          },
          handleDeleteConversationRecordList(conversationId) {
            let choose = this.forwardObj.chooseConversationRecordList;
            for (let i = 0; i < this.forwardObj.forwardConversationRecordList.length; i++) {
              if (this.forwardObj.forwardConversationRecordList[i].conversationId == conversationId) {
                if (this.forwardObj.forwardConversationRecordList[i].chooseStatus == 1) {
                  this.forwardObj.forwardConversationRecordList[i].chooseStatus = 0;
                  for (let j = 0; j < choose.length; j++) {
                    if (choose[j].conversationId == conversationId) {
                      choose.splice(j, 1);
                    }
                  }
                } else {
                  this.forwardObj.forwardConversationRecordList[i].chooseStatus = 1;
                }
              }
            }
            this.forwardObj.chooseConversationRecordList = choose;
          },
    

    转发开始

    支持转发文字、表情、图片、文件、视频、语音

    //转发消息开始
          handleSendForward() {
            let forwardDatas = this.forwardObj.chooseConversationRecordList;
            if (forwardDatas.length === 0) {
              this.$message.error('未选择转发对象');
              return;
            }
            // this.forwardObj.forwardObjSelfStatus = false;
            let msgData = this.forwardObj.saveCourentMsgDataObj;
            console.log('消息数据msgdata');
            console.log(msgData);
            //type:0:文字;1:图片;3:视频;5:文件
            //发送文字
            // this.forwardSendMessage()
            //发送图片
            // this.sendPhoto(res.obj.relativeUrl);
    
            //发送文件
            // this.sendfile(res.obj.relativeUrl, messageFilesPostArray[i].name);
            // this.forwardSendMessage(msgData);
            for (let i = 0; i < forwardDatas.length; i++) {
              let conObj = {};
              conObj.conversationId = forwardDatas[i].conversationId;
              conObj.conversationName = forwardDatas[i].name;
              conObj.conversationNumber = forwardDatas[i].number;
              conObj.conversationType = forwardDatas[i].conversationType;
              switch (msgData.type) {
                case 0: //文字
                  console.log('转发文字');
                  this.forwardSendMessage(conObj, msgData);
                  this.closeShowForwardObjDialog();
                  break;
                case 1: //图片
                  console.log('转发图片');
                  this.forwardSendPhoto(conObj, msgData.url);
                  this.closeShowForwardObjDialog();
                  break;
                case 5: //文件
                  console.log('转发文件');
                  let name = msgData.mss;
                  this.forwardSendfile(conObj, msgData.url, name);
                  this.closeShowForwardObjDialog();
                  break;
                case 2: //语音信息
                  console.log('转发语音信息');
                  let currentUrlY = msgData.url;
                  let nameY = '语音文件';
                  this.forwardSendyuyin(conObj, currentUrlY, nameY);
                  this.closeShowForwardObjDialog();
                  break;
    
                case 3: //视频
                  console.log('转发视频');
                  break;
              }
            }
    
          },
          //转发---发送文本数据
          forwardSendMessage(conObj, msgObj) {
            if (conObj.conversationId === '' || conObj.conversationId === null || conObj.conversationId === undefined) {
              this.$Message.error('请先选择会话组');
              return;
            } else {
              var obj = {
                //conversationId  0:调度员 ;1:终端;2:群组 、会话组
                conversationId: conObj.conversationId,
                name: conObj.conversationName,
                number: conObj.conversationNumber,
                conversationType: conObj.conversationType,
              };
              let msgstring = msgObj.mss;
              let user_id = this.user.userId;
              if (obj.conversationType === 0) { //调度员         1:终端,-1:调度员,>1:群组
                obj.conversationType = -1;
                DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
              }
              if (obj.conversationType == 1) {//终端
                obj.conversationType = 1;
                DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
              } else if (obj.conversationType == 2) {//固定组
                obj.conversationType = 2;
                DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
              } else if (obj.conversationType == 3) {//会话组
                obj.conversationType = 2;
                MessageApi.queryNickname({
                  conversationId: conObj.conversationId,
                  member_id: this.user.userId,
                }).then(res => {
                  // 返回数据
                  if (res.success) {
                    if (res.obj) {
                      obj.NickName = res.obj;
                    }
                    console.log('发送检查22obj');
                    console.log(obj);
                    let msgstring = msgObj.mss;
                    console.log(msgstring);
                    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);
                    }
                  }
                }).catch(err => {
                  // 异常情况
                  // this.$Message.error('');
                });
              }
            }
    
          },
          //转发---发送图片数据
          forwardSendPhoto(conObj, url) {
            let obj = {
              conversationId: conObj.conversationId,
              name: conObj.conversationName,
              number: conObj.conversationNumber,
              conversationType: conObj.conversationType,
            };
    
            let user_id = this.user.userId;
            if (obj.conversationType === 0) { //调度员         1:终端,-1:调度员,>1:群组
              obj.conversationType = -1;
              DispatchmessageCtrl.sendPhoto(obj, url, user_id);
            }
            if (obj.conversationType == 1) {//终端
              obj.conversationType = 1;
              DispatchmessageCtrl.sendPhoto(obj, url, user_id);
            } else if (obj.conversationType == 2) {
              obj.conversationType = 2;
              DispatchmessageCtrl.sendPhoto(obj, url, user_id);
            } else if (obj.conversationType == 3) {
              obj.conversationType = 2;
              MessageApi.queryNickname({
                conversationId: conObj.conversationId,
                member_id: this.user.userId,
              }).then(res => {
                // 返回数据
                if (res.success) {
                  if (res.obj) {
                    obj.NickName = res.obj;
                  }
                  DispatchmessageCtrl.sendPhoto(obj, url, user_id);
                }
              }).catch(err => {
                // 异常情况
                // this.$Message.error('');
              });
            }
          },
          //转发---发送文件数据
          forwardSendfile(conObj, url, name) {
            console.log('转发---发送文件数据');
            let obj = {
              conversationId: conObj.conversationId,
              name: conObj.conversationName,
              number: conObj.conversationNumber,
              conversationType: conObj.conversationType,
            };
            let fileName = name;
            let user_id = this.user.userId;
            if (obj.conversationType === 0) { //调度员         1:终端,-1:调度员,>1:群组
              obj.conversationType = -1;
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
            }
            if (obj.conversationType == 1) {//终端
              obj.conversationType = 1;
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
            } else if (obj.conversationType == 2) {
              obj.conversationType = 2;
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
            } else if (obj.conversationType == 3) {
              obj.conversationType = 2;
              MessageApi.queryNickname({
                conversationId: conObj.conversationId,
                member_id: this.user.userId,
              }).then(res => {
                // 返回数据
                if (res.success) {
                  if (res.obj) {
                    obj.NickName = res.obj;
                  }
    
                  function getFileName(fileName) {
                    // var fileName = 20190522163922.png;
                    let first = fileName.lastIndexOf('.');//取到文件名开始到最后一个点的长度
                    let namelength = fileName.length;//取到文件名长度
                    let name = fileName.substring(0, first);//截取获得后缀名
                    return name;
                  }
    
                  // let fileName = getFileName(name);
                  DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
    
                }
              }).catch(err => {
                // 异常情况
                // this.$Message.error('');
              });
            }
    
          },
          //转发---发送语音数据
          forwardSendyuyin(conObj, url, name) {
            console.log('转发---发送语音数据');
            console.log(url);
            let obj = {
              conversationId: conObj.conversationId,
              name: conObj.conversationName,
              number: conObj.conversationNumber,
              conversationType: conObj.conversationType,
            };
            let fileName = name;
            let user_id = this.user.userId;
            if (obj.conversationType === 0) { //调度员         1:终端,-1:调度员,>1:群组
              obj.conversationType = -1;
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
            }
            if (obj.conversationType == 1) {//终端
              obj.conversationType = 1;
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
            } else if (obj.conversationType == 2) {
              obj.conversationType = 2;
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
            } else if (obj.conversationType == 3) {
              obj.conversationType = 2;
              MessageApi.queryNickname({
                conversationId: conObj.conversationId,
                member_id: this.user.userId,
              }).then(res => {
                // 返回数据
                if (res.success) {
                  if (res.obj) {
                    obj.NickName = res.obj;
                  }
    
                  function getFileName(fileName) {
                    // var fileName = 20190522163922.png;
                    let first = fileName.lastIndexOf('.');//取到文件名开始到最后一个点的长度
                    let namelength = fileName.length;//取到文件名长度
                    let name = fileName.substring(0, first);//截取获得后缀名
                    return name;
                  }
    
                  // let fileName = getFileName(name);
                  DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
    
                }
              }).catch(err => {
                // 异常情况
                // this.$Message.error('');
              });
            }
    
          },
          //关闭转发弹框
          closeShowForwardObjDialog() {
            this.forwardObj.showForwardObjDialog = false;
            this.forwardObj.chooseConversationRecordList = [];
          },
    
    展开全文
  • 需求:撤回消息 思路 鼠标右键弹出 撤回 按钮 点击撤回按钮,拿到当前选中消息id,遍历消息列表拿到消息相关数据,主要是拿到用户名 通过接口撤回当前消息 在撤回成功回调中重新更新列表数据 到这里,有两个办法...

    需求:撤回消息

    思路

    • 鼠标右键弹出 撤回 按钮
    • 点击撤回按钮,拿到当前选中消息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();
            }
    
          },
    

    来看看效果

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 思路:使用element-ui中的previewSrcList 开启预览大图的功能。 绑定双击事件,把消息中的url拿到 判断双击事件是否绑定有图片id,预览图片 预览图片 <!--图片预览--> <div style="z-index: 9999999;"&...

    需求:双击消息图片,大图预览

    思路:使用element-ui中的previewSrcList 开启预览大图的功能。

    • 绑定双击事件,把消息中的url拿到
    • 判断双击事件是否绑定有图片id,预览图片

    预览图片

        <!--图片预览-->
    <div style="z-index: 9999999;">
        <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="[msgImgurl]" />
    </div>
    

    使用v-html返回显示消息图片

    
                  html += '<span ><img id="showMsgImgViewer"  class="msgPhotoContent" src="http://' + nginxIp + ':' + msg.url +
                      '" data-menu="img" /></span>';
    

    双击事件

    @dblclick="msgDoubleclick($event,item.url)"
    
    
          //消息双击事件
          msgDoubleclick(e, msgUrl){
            let thisId = e.target.id;
            switch (thisId) {
              case 'downLoadMsg': //下载文件
                let ipUrl = 'http://' + this.user.ip + ':' + msgUrl;
                let a = document.createElement('a');
                //
                a.setAttribute('download', '');
                a.href = ipUrl;
                a.click();
                break;
              case 'showMsgImgViewer'://消息图片预览
                let msgImgUrl = 'http://' + this.user.ip + ':' + msgUrl;
                if (msgImgUrl !=''){
                  this.msgImgurl = msgImgUrl;
                  this.showViewer = true;
                }
    
                break;
            }
          },
    

    效果

    在这里插入图片描述

    展开全文
  • 回车发送消息 <!--输入区域--> <div class="messagesBox-BigRight-down20-input"> <div style="z-index: 9999"> <el-input class="inputmsg" type="textarea" :rows="4" placehol
  • 发送消息文本数据 思路: 输入框输入文本数据,点击发送 通过发送成功后,把消息数据显示到聊天页面中 收到消息同理
  • 需求:左右聊天气泡 聊天气泡分为矩形和三角形 例如微信气泡 使用伪元素,设置三角形 <div class="chatBox chatBox-left"> 你好 </div> .chatBox{ position: relative; margin:12px;...
  • vue消息推送【个推】

    千次阅读 2019-04-30 14:20:34
    由于个推在市场上使用量比较多,于是就开启了我的Vue消息推送个推之旅。 而此时发现个推的开发者中心注册账号时,需要: 这些他必须要得提供。我们知道android包名和IOS bundleID就是我们使用Hbuilder的包名,...
  • 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue v-if=isShow class={ xss=removed xss=removed xss=...
  • vue聊天功能模块

    千次阅读 多人点赞 2020-08-26 17:00:48
    需求:聊天模块,可以实现发送文字、表情、图片、文件 ...聊天布局:左消息,撤回消息,右消息,用text-align控制 布局 <!--聊天界面--> <div class="messagesBox-BigRight-down80"> &
  • 需求:消息有文本和表情图片 let emojiList = [ '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]', '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '...
  • 本文实例讲述了PHP实现的消息实时推送功能。分享给大家供大家参考,具体如下:入口文件index.html<!DOCTYPE HTML> <html> <head> <title>反ajax推送</title> <style> .send{...
  • vue + webSocket 实时任务信息通知 WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的...
  • 预览 艾特开始 ...3.要实现艾特提示,输入框显示的是“@某某某”,实际发出去的消息,把@某某某转换为我们限定的某字符串,然后收到消息通过字符串匹配即可 下面,我们来一步步实现这功能吧 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 460
精华内容 184
关键字:

vue消息功能

vue 订阅