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

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

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

效果