el-image-viewer下载图片
时间: 2023-10-24 15:10:07 浏览: 140
el-image-viewer是一个Vue.js组件,用于显示图片并支持缩放和拖动。它本身并不提供下载图片的功能,但你可以在组件中添加一个下载按钮,并在点击按钮时使用JavaScript代码来实现下载图片的功能。
以下是一个简单的示例代码,用于在el-image-viewer组件中添加一个下载按钮:
```html
<template>
<div>
<el-image-viewer :url="imageUrl"></el-image-viewer>
<el-button @click="downloadImage">下载图片</el-button>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
}
},
methods: {
downloadImage() {
const link = document.createElement('a')
link.href = this.imageUrl
link.download = 'image.jpg'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
</script>
```
在上面的代码中,我们在el-image-viewer组件下方添加了一个按钮,并在点击按钮时调用downloadImage方法。该方法创建一个a标签,并将图片的URL设置为a标签的href属性。然后,我们将a标签添加到文档中,模拟用户点击a标签来下载图片。最后,我们从文档中删除a标签。
阅读全文