<template>
|
<div class="imgBox">
|
<img :src="'/httpImage/' + url" class="cursor-pointer" v-if="isPreview" preview />
|
<img :src="'/httpImage/' + url" v-if="!isPreview" />
|
<el-button class="btn" @click="downloadIamge('/httpImage/' + url)">
|
<i class="iconfont iconxiazai"></i>
|
</el-button>
|
</div>
|
</template>
|
<script>
|
import axios from "axios"
|
export default {
|
props: {
|
url: {
|
default: "",
|
type: String
|
},
|
isPreview: {
|
default: true,
|
type: Boolean
|
}
|
},
|
methods: {
|
downloadIamge(url) {
|
axios({
|
method: "get",
|
url: url,
|
responseType: "blob"
|
})
|
.then((res) => {
|
if (res.status == 200) {
|
var a = document.createElement("a")
|
var strs = url.split("/")
|
var href = new Blob([res.data], { type: "image/jpeg" })
|
a.href = URL.createObjectURL(href)
|
a.download = strs[strs.length - 1] + ".jpg"
|
a.click()
|
}
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: "下载失败，" + err + "请重试！",
|
duration: 2500,
|
offset: 57
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.imgBox {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
.btn {
|
width: 30px;
|
height: 30px;
|
position: absolute;
|
padding: 0;
|
right: 20%;
|
opacity: 1;
|
bottom: 10px;
|
animation: fadenum 0.7s ease;
|
-webkit-animation: fadenum 0.7s ease;
|
display: none;
|
i {
|
font-size: 20px;
|
}
|
}
|
}
|
.imgBox:hover .btn {
|
display: inline;
|
}
|
@keyframes fadenum {
|
0% {
|
opacity: 0;
|
}
|
100% {
|
opacity: 1;
|
}
|
}
|
@-webkit-keyframes fadenum {
|
/*设置内容由显示变为隐藏*/
|
|
0% {
|
opacity: 0;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
</style>
|
