vue项目elementUi图片预览添加自定义按钮，elementUi图片预览添加下载按钮

前言

后台项目，用的element-ui，有用户上传的资料图片，预览直接使用的el-image的preview-src-list，现在需求是在点击预览之后还能在预览界面进行图片的下载，而element-ui的el-image组件预览没提供下载功能，只能自己写一个了。

效果图

在这里插入图片描述

自定义组件 cus-image

创建 cusImage.vue 自定义组件

代码 props 属性原汁原味儿除了 lazy 和 scroll-container z-index 没写，其它的都写了，只是改成了 cus-image

<template>
  <div class="cus-image" :style="width + ';' + height">
    <el-image
        style="width: 100%; height: 100%"
        :src="src"
        :fit="fit"
        :alt="alt"
        :referrerPolicy="referrerPolicy"
        :zIndex="zIndex"
        :preview-src-list="previewSrcList"
        @click="cusPreviewImage"
    >
    </el-image>
    <span
        class="el-image-viewer__btn el-image-viewer__download"
        v-show="dnFlag"
        @click="dnImage"
    >
        <i class="el-icon-download"></i>
    </span>
  </div>
</template>
<script>
export default {
       
       
    name: "cusImage",
    data() {
       
       
        return {
       
       
            dnFlag: false,
            wrapperElem: null,
            hidElClassNameLists: [
                "el-image-viewer__mask",
                "el-image-viewer__btn el-image-viewer__close",
                "el-icon-close",
            ],
        };
    },
    props: {
       
       
        src: {
       
       
            type: String,
            default: "",
        },
        previewSrcList: {
       
       
            type: Array,
            default: function () {
       
       
                return [];
            },
        },
        width: {
       
       
            type: String,
            default: "100%",
        },
        height: {
       
       
            type: String,
            default: "100%",
        },
        fit: {
       
       
            type: String,
            default: "",
        },
        alt: {
       
       
            type: String,
            default: "",
        },
        referrerPolicy: {
       
       
            type: String,
            default: "",
        },
        zIndex: {
       
       
            type: Number,
            default: 2000,
        },
    },
	methods: {
       
       
        cusPreviewImage() {
       
       
            this.dnFlag = true;
            this.checkElemlents();
        },
        checkElemlents() {
       
       
            this.$nextTick(() => {
       
       
                let wrapper = document.getElementsByClassName(
                    "el-image-viewer__wrapper"
                );
                if (wrapper.length > 0) {
       
       
                    this.wrapperElem = wrapper[0];
                    this.cusClickHandler();
                } else {
       
       
                    this.checkElemlents();
                }
            });
        },
        cusClickHandler() {
       
       
            this.wrapperElem.addEventListener("click", this.hideCusBtn);
        },
        hideCusBtn(e) {
       
       
            let className = e.target.className;
            if (this.hidElClassNameLists.includes(className)) {
       
       
                this.dnFlag = false;
            }
        },
        dnImage() {
       
       
            let imgUrl = document.getElementsByClassName(
                "el-image-viewer__canvas"
            )[0].children[0].src;
            this.downloadImage(imgUrl);
        },
        // 下载图片，这里如果涉及到跨域需自行解决，我们设置的 CORS，文章最下方有跨域 NGINX 解决办法
        downloadImage(imgUrl) {
       
       
            let tmpArr = imgUrl.split("/");
            let fileName = tmpArr[tmpArr.length - 1];
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            // 至关重要
            xhr.responseType = "blob";
            xhr.onload = function () {
       
       
                if (this.status == 200) {
       
       
                    //得到一个blob对象
                    var blob = this.response;
                    var fileUrl = window.URL.createObjectURL(blob);
                    var a = document.createElement("a");
                    (document.body || document.documentElement).appendChild(a);
                    a.href = fileUrl;
                    if ("download" in a) {
       
       
                        a.download = fileName;
                    } else {
       
       
                        a.setAttribute("download", fileName);
                    }
                    a.target = "_self";
                    a.click();
                    a.remove();
                }
            };
            xhr.send();
        },
    },
};
</script>
<style scoped lang="less">
.cus-image {
       
       
    display: inline-block;
    .el-image-viewer__download {
       
       
	    top: 40px;
        right: 100px;
        width: 40px;
        height: 40px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        z-index: 2001; /* 如果该组件需要传递 z-index 的值，这个值也需要做成动态的 props */
        cursor: pointer;
        position: fixed; 
    }
}
</style>

调用

<template>
    <div class="home">
        <div class="avatar">
          <cus-image
              :src="path"
              :preview-src-list="imgList"
          >
          </cus-image>
        </div>
    </div>
</template>
<script>
	// @ is an alias to /src
import cusImage from "@/components/cusImage.vue";

export default {
       
       
    name: "Home",
    components: {
       
       
        cusImage,
    },
    data() {
       
       
        return {
       
       
            imgList: [
                "https://www.***.com/upload_files/aaa.jpg",
                "https://www.***.com/upload_files/image/2021/03/16/1615879665_832809.png",
                "https://www.***.com/upload_files/bbb.png",
            ],
            path: "https://www.***.com/upload_files/aaa.jpg"
        };
    },
};
</script>
<style lang="less">
.avatar{
       
       
  width: 380px;
  height: 200px;
}
</style>

NGINX配置CORS实现跨域

vue项目elementUi图片预览添加自定义按钮，elementUi图片预览添加下载按钮

前言

效果图

自定义组件 cus-image

猜你喜欢