Demand Background:

The thumbnail of multiple pictures is displayed in the evaluation picture column of the form. Click on the thumbnail to preview the large picture, and you can slide left and right, rotate and download the function

Realize the effect drawing

The component code viewimage.vue

<template> <div class="view-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: "viewImage", 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(e) { console.log(this.src,e,'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]; console.log(wrapper,'wrapper') this.cusClickHandler(); } else { this.checkElemlents(); }}); }, cusClickHandler() { this.wrapperElem.addEventListener("click", this.hideCusBtn); }, hideCusBtn(e) { console.log(e,'e') let className = e.target.className; console.log(className,'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); }, imgsrc, name {// image.setattribute ('crossOrigin', image.setattribute ('crossOrigin', 'anonymous') image.onload = () => { const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) canvas.toBlob((blob) => { const url = URL.createObjectURL(blob) const a = document.createElement('a') a.download = name || 'photo' a.href = url a.click() a.remove() URL.revokeObjectURL(url) }) } image.src = imgsrc }, downloadImage(imgUrl){ this.download(imgUrl,name) } }, mounted() { } }; </script> <style scoped> .view-image { display: inline-block; } .view-image .el-image-viewer__download { top: 40px; right: 100px; width: 40px; height: 40px; font-size: 24px; color: #fff; background-color: #606266; z-index: 2001; /* If this component needs to pass the z-index value, this value also needs to be props */ cursor: pointer; position: fixed; } </style>Copy the code

The calling component

<script> import viewImage from "@/components/viewImage"; export default { components: {viewImage}} </script> HTML code <el-table-column label=" comment "property="" align="center" width="200px"> <template slot-scope="scope"> <div style="width: 100%; display: flex; justify-content: space-between;" > <div v-for="(url,index) of scope.row.imageList" :key="index" style="margin-left:5px;" > <view-image :previewSrcList="scope.row.imageList" :src="url" > </view-image> </div> </div> </template> </el-table-column>Copy the code