Vue鼠标移入（悬停）显示-移出隐藏

最新推荐文章于 2024-07-31 15:16:05 发布

谈谈的心情

最新推荐文章于 2024-07-31 15:16:05 发布

阅读量6.1k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 标移入（悬停）显示鼠标移出隐藏

本文链接：https://blog.csdn.net/ljw124213/article/details/128828289

版权

vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

需求：详情页面显示多张图片，当鼠标悬停在某张图片上时，图片上显示下载按钮；鼠标移出后，下载按钮隐藏。

最终效果如下：

①鼠标悬停

②鼠标移出

实现

①布局

<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()
}