![cover](https://img-blog.csdnimg.cn/531ef93f028a4f06946ec18b7f1bf0d5.jpeg)
Vue鼠标移入(悬停)显示-移出隐藏
需求:详情页面显示多张图片,当鼠标悬停在某张图片上时,图片上显示下载按钮;鼠标移出后,下载按钮隐藏。
·
需求:详情页面显示多张图片,当鼠标悬停在某张图片上时,图片上显示下载按钮;鼠标移出后,下载按钮隐藏。
最终效果如下:
①鼠标悬停
②鼠标移出
实现
①布局
<div v-if="detailData.detailFile" class="imgList">
<span v-for="(img, index) in detailData.detailFile" :key="index" class="img-sapn">
<img :src="img" alt="" width="88" height="88" @click="preview('single', img)" />
<span class="pic-down" @click="downloadFile(img, '下载')">
<i class="h-icon-download"></i>
</span>
</span>
</div>
②样式
<style lang="scss" scoped>
.imgList {
margin-top: 12px;
}
.img-sapn {
cursor: pointer;
display: inline-block;
margin-right: 8px;
position: relative;
&:hover {
.pic-down {
display: inline-block;
}
}
}
.pic-down {
background: rgba($color: #000000, $alpha: 0.3);
position: absolute;
height: 30px;
width: 100%;
bottom: 0px;
left: 0px;
text-align: center;
color: #fff;
display: none;
line-height: 30px;
i {
font-size: 24px;
}
}
</style>
③下载相关
downloadFile(content, fileName) {
//下载base64图片
var base64ToBlob = function (code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], {
type: contentType,
})
}
let aLink = document.createElement('a')
let blob = base64ToBlob(content) //new Blob([content]);
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName
aLink.href = URL.createObjectURL(blob)
aLink.click()
}
更多推荐
所有评论(0)