<el-image
@click.stop.prevent="clickImage"
style="width: 100px; height: 100px"
:src="item"
:preview-src-list="[item]"
>
</el-image>
clickImage() {
this.$nextTick(() => {
let wrapper = document.getElementsByClassName(
'el-image-viewer__actions__inner'
)
// 添加下载图片按钮
let downloadBtn = document.createElement('i')
downloadBtn.setAttribute('class', 'el-icon-download')
downloadBtn.addEventListener('click', this.cusClickHandler)
wrapper[0].appendChild(downloadBtn)
// 添加删除图片按钮
let deleteBtn = document.createElement('i')
deleteBtn.setAttribute('class', 'el-icon-delete')
deleteBtn.addEventListener('click', this.deleteImage)
wrapper[0].appendChild(deleteBtn)
if (wrapper.length > 0) {
this.wrapperElem = wrapper[0]
}
})
},
deleteImage() {
console.log('click delete btn')
},
cusClickHandler() {
// this.wrapperElem.addEventListener('click', () => {
const imgUrl = document.getElementsByClassName('el-image-viewer__img')[0]
.src
console.log(imgUrl)
const parts = imgUrl.split('/')
const lastPart = parts.pop()
const link = document.createElement('a')
fetch(imgUrl)
.then((res) => {
return res.blob()
})
.then((blob) => {
const blobUrl = URL.createObjectURL(blob)
link.href = blobUrl
link.download = lastPart
link.click()
})
link.href = imgUrl
link.download = lastPart
// })
},
最终效果