vue中关于element的el-image 图片预览功能增加一个下载按钮

目录

项目场景：

 效果图如下：

一、安装element-ui

1. 安装element-ui

 2. 检查是否安装成功

3. 引用element-ui组件

二、改造步骤

修改代码：

---

项目场景：

工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是 简单放大旋转功能，解决方法 要么 修改组件，要么 通过 js动态渲染进去，接下来看操作。

---

 效果图如下：

一、安装element-ui

1. 安装element-ui

在项目终端输入以下代码完成element-ui的安装

npm i element-ui -S

 2. 检查是否安装成功

查看配置文件package.json，是否有element-ui组件的版本号

3. 引用element-ui组件

在main.js文件中输入以下代码，引入element

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

二、改造步骤

修改代码：

通过点击放大时，添加点击事件，然后通过append 添加 按钮并且绑定事件，还是看下图吧，兄弟们，粘起来。

最总效果