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

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

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

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

预览图片

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

html += '';

双击事件

@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;        }      },

效果