vue聊天功能模块（六）消息图片预览

需求：双击消息图片，大图预览

思路：使用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;
        }
      },

效果