vue项目elementUi图使用el-image下载图片原尺寸下载放大缩小旋转图片增加自定义按钮

最新推荐文章于 2024-08-18 10:34:04 发布

凑热闹的

最新推荐文章于 2024-08-18 10:34:04 发布

阅读量7.3k

点赞数 6

分类专栏： vue.js vue js 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_45852123/article/details/119946154

版权

本文介绍了如何在Vue项目中使用ElementUI的el-image组件，并通过添加自定义下载按钮，实现图片原尺寸下载功能。内容包括创建下载按钮、布局调整和事件监听以完成图片的放大、缩小、旋转及下载操作。

摘要由CSDN通过智能技术生成

elementUi框架中有el-image，这个组件可以放大，缩小，旋转图片。适用于一般通用性业务，但是有下载需求的话这个就满足不了，需要自己手动撸一管下载按钮来实现下载功能
效果图
在这里插入图片描述
实现思路
1.创建下载按钮图标
2.把创建的下载图标放到和旋转放大同一行内
3.监听图标按钮点击事件
4.实现下载原图

```html
 <template>
  <div >
     <el-image
        style="width: 40px; height: 40px; margin-top: 5px; margin-right: 5px"
        :src="src"
        :fit="fit"
        :preview-src-list="allLi"
        :scroll-container="scrollContainer"
        lazy
        @click="clickImage"
      ></el-image>
  </div>
</template>

<script>
  export default {
     
    data()