el-image-pro点击文本也能预览图片，支持下载

背景

element-ui：2.15.14
el-image的预览是没有下载功能的，默认是这样的
且默认是通过点击图片才能预览的，有时候我们显示的是图片名称，那么能不能直接点击图片名称来预览呢？

现在想在预览的时候，给它加一个下载按钮，该怎么办，先上效果图

实现方法

思路：

1. 封装组件，手动触发图片的点击事件
2. 点击后进入预览弹框，在底部图标组中插入一个下载图标
3. 隐藏组件，让父组件通过点击事件触发，就好像点击的时候弹出了预览弹框
   封装代码如下：

<template>
  <div class="img-parent-box" v-if="open" @click="checkImage" ref="parentRef">
    <el-image
      ref="imgRef"
      style="width: 100px; height: 100px"
      :src="src"
      :preview-src-list="[src]">
    </el-image>
  </div>
</template>

<script>
// 在el-image的基础上加了个下载按钮功能，适用于直接点击文本预览图片（注：不是直接点击图片）
export default {
  data() {
    return {
      open: false,
      src: null,
      fileName: null,
    }
  },
  methods: {
    // 显示弹框
    showDialog(e) {
      this.src = e.src
      this.fileName = e.fileName
      this.open = true
      this.$nextTick(() => {
        window.handleDownload = this.handleDownload
        this.$refs.imgRef.clickHandler()
        setTimeout(() => {
          this.$refs.parentRef.click()
        }, 100)
      })
    },

    // 图片预览加入下载按钮
    checkImage(){
      let a = document.querySelector('.el-image-viewer__actions__inner');
      let ff = document.createElement('i')
      ff.innerHTML = `<i class="el-icon-download" οnclick="handleDownload()"></i>`
      a.appendChild(ff)
    },

    // 下载
    handleDownload() {
      if (this.src) {
        this.downLoadImg(this.src, this.fileName || this.src);
      }
    },

    downLoadImg(file_url, name) {
      if (!file_url || !name) {
        console.warn('file_url和name不能为空！');
        return false
      }
      const a = document.createElement('a')
      const url = file_url;
      fetch(url,{mode:'cors'}).then(res => res.blob()).then(blob => {
        a.href = URL.createObjectURL(blob)
        a.download = name
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
      })
    }
  }
}
</script>

<style scoped>
.img-parent-box {
  width: 0;
  height: 0;
  overflow: hidden;
}
</style>

父组件中引用预览组件：

<img-preview ref="imgPreviewRef" />

父组件点击图片名称时直接调用即可：

  this.$refs.imgPreviewRef.showDialog({
  	src: res.data.url,
    fileName: res.data.fileName
 })