elmentpuls el-image-viewer 标签添加下载按钮

Element-plus的`el-image-viewer`组件是一个轻量级的图片查看器，通常用于预览和展示图片。如果你想在这个组件上添加一个下载按钮，可以按照以下步骤操作：

1. 首先，在`el-image-viewer`容器内创建一个新的`<button>`元素，作为下载按钮的基本结构。例如:

<template>
  <el-image-viewer>
    <!-- ... 图片显示配置 -->
    <div slot="custom-footer">
      <button @click="downloadImage">下载</button>
    </div>
  </el-image-viewer>
</template>

2. 然后，在对应的Vue实例中定义`downloadImage`方法，这个方法会在点击下载按钮时被触发，你可以在这里设置图片的下载链接或使用原生的FileSaver API保存图片。例如：

<script>
export default {
  methods: {
    downloadImage() {
      const imageUrl = this.$refs.imageViewer.src; // 获取当前图片链接
      const a = document.createElement('a'); // 创建一个隐藏的a标签
      a.href = imageUrl;
      a.download = 'image.jpg'; // 设置文件名
      document.body.appendChild(a); // 添加到文档以便触发下载
      a.click(); // 触发下载
      document.body.removeChild(a); // 删除已使用的a标签
    },
  },
};
</script>

这里的代码假设图片URL已经存储在了`this.$refs.imageViewer.src`这个变量中。