需求：详情页面显示多张图片，当鼠标悬停在某张图片上时，图片上显示下载按钮；鼠标移出后，下载按钮隐藏。
最终效果如下：
①鼠标悬停
②鼠标移出
实现
①布局
<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.lengthlet 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 = fileNameaLink.href = URL.createObjectURL(blob)aLink.click()}
