系列文章目录
文章目录
项目需求
开发中遇到需要el-image支持下载功能，思路：
1.考虑鼠标滑过增加一个蒙层，加上放大，删除，下载功能
2.el-image放大的图片按钮增加一个删除按钮
最终选择了2，因为1的话还要自己写放大，不能用el-image自带的:preview-src-list，蒙层会遮住图片，无法使用图片的点击事件
具体实现
<template>
<el-image
@click.stop.prevent="clickImage"
:src="fileUrl"
:preview-src-list="getPreviewList(index, imageUrlList)"
>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
<script>
//导入下载方法
import downLoadRemoteFile from '@util/downLoadRemoteFile';
export default {
data() {
return {
fileUrl:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
imageUrlList: [
{
fileName: 'test4.jpeg',
fileUrl: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
},
{
fileName: 'test5.jpeg',
fileUrl: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
}
]
};
},
methods: {
/**
* @description: 查看-大图预览, 先看当前大图
* @param {Number} index 当前下标
* @param {Array} imgList 所有大图
* @return {Array} arr 当前图片为第一个的大图
*/
getPreviewList(index, imgList) {
let arr = [];
let i = 0;
for (i; i < imgList.length; i++) {
arr.push(imgList[i + index].fileUrl);
if (i + index >= imgList.length - 1) {
index = 0 - (i + 1);
}
}
return arr;
},
/**
* @description: 预览的图片添加下载按钮
*/
clickImage() {
this.$nextTick(() => {
let wrapper = document.getElementsByClassName('el-image-viewer__actions__inner');
let downImg = document.createElement('i');
downImg.setAttribute('class', 'el-icon-download');
wrapper[0].appendChild(downImg);
if (wrapper.length > 0) {
this.wrapperElem = wrapper[0];
this.cusClickHandler();
}
});
},
/**
* @description: 预览的图片给下载按钮添加事件
*/
cusClickHandler() {
this.wrapperElem.addEventListener('click', () => {
const imgUrl = document.getElementsByClassName('el-image-viewer__img')[0].src;
const ArrCurImg = this.imageUrlList.filter(item => {
return item.fileUrl === imgUrl;
});
downLoadRemoteFile(imgUrl, ArrCurImg[0].fileName);
});
},
}
};
</script>
downLoadRemoteFile的具体实现参考文章 获取 blob 实现不跳转下载_猿如意的博客-CSDN博客
