项目场景：
工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是 简单放大旋转功能，解决方法 要么 修改组件，要么 通过 js动态渲染进去，接下来看操作。
效果图如下：
一、安装element-ui
1. 安装element-ui
在项目终端输入以下代码完成element-ui的安装
npm i element-ui -S
2. 检查是否安装成功
查看配置文件package.json，是否有element-ui组件的版本号
3. 引用element-ui组件
在main.js文件中输入以下代码，引入element
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
二、改造步骤
修改代码：
通过点击放大时，添加点击事件，然后通过append 添加 按钮并且绑定事件，还是看下图吧，兄弟们，粘起来。
<template> <div style="margin-top: 2vh"> <waterfall @loadmore="loadmore" :col=4 :lazy-distance="300" :load-distance="300" :data="xx"> <div class="cell-item zxzx demo-image__preview " v-for="(item,index) in xx" :key="index" @click="checkImage" style="padding: 0 1vw;"> <el-image style="width: 100%; margin-top: 2vh" :src="item.img1" :preview-src-list="[item.img]"> </el-image> <p style="background-color: rgba(0,0,0,0.1); color: #fff; text-align: center; margin-top: -6px;">{{item.createTime}}</p> </div> </waterfall> </div> </template> <script> mounted() { window.cl = this.cl }, methods: { cl() { let srcUrl=document.querySelector('.el-image-viewer__img').src; this.downloadIamge(srcUrl,srcUrl) }, checkImage(){//这个事件要绑定el-image父级盒子上 console.log('点击事件'); let a=document.querySelector('.el-image-viewer__actions__inner'); // $(a).append(`<i class="el-icon-download" onclick="installImage()"></i>`) // a.append( `<i class="el-icon-download" onclick="cl()"></i>`) console.log(a) let ff = document.createElement('i') ff.innerHTML = `<i class="el-icon-download" onclick="cl()"></i>` a.appendChild(ff) }, downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; let context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 let a = document.createElement("a"); // 生成一个a元素 let event = new MouseEvent("click"); // 创建一个单击事件 a.download = name || "photo"; // 设置图片名称 a.href = url; // 将生成的URL设置为a.href属性 a.dispatchEvent(event); // 触发a的单击事件 }; image.src = imgsrc; }, } </script>
最总效果
