Vue实现悬浮图片弹出大图预览弹窗,弹窗顶部与图片顶部平齐

Vue实现悬浮图片弹出大图预览弹窗,弹窗顶部与图片顶部平齐

需求背景

当前项目内某页面左侧展示图片列表,图片列表展示的均为小图。需求希望鼠标移动到对应图片时,右侧出现大图预览弹窗,且该弹窗顶部需与图片顶部平齐。同时弹窗要在页面中展示完全,不能超出窗口高度导致被遮挡

核心实现

1.获取悬浮图片的位置信息

html 复制代码
<div class="image_item" v-for="(item, index) in imgList" :key="index">
    <img
       	:src="item"
       	class="img"
       	@mouseenter="e => handlePreview(e, item)"
       	@mouseleave="preview.show = false"
    />
</div>
javascript 复制代码
// 获取当前图片顶部与视口顶部的距离top和底部的距离bottom
const handlePreview = (e, url) => {
      const targetRect = e.target.getBoundingClientRect()
      preview.bottom = window.innerHeight - targetRect.top
      preview.top = targetRect.top
      preview.url = url
      preview.show = true
}

2.动态计算大图预览弹窗位置

html 复制代码
<!-- 样式绑定计算属性,根据悬浮图片位置变化 -->
<div class="module_view" v-show="preview.show" :style="previewStyle">
  	<img :src="preview.url" class="img" />
</div>
javascript 复制代码
const previewStyle = computed(() => {
      // 弹窗实际高度
      const previewHeight = 538
      const container = listRef.value
      // 容器与视口顶部距离
      const containerTop = container ? container.getBoundingClientRect().top : 0
      const previewTop = preview.top
      const previewBottom = preview.bottom
      // 弹窗顶部与容器顶部的距离
      let top = previewTop - containerTop
      let bottom = previewBottom - previewHeight
      // 判断弹窗顶部与视口底部的距离是否能容纳整个弹窗
      if (bottom < 0) {
        // 无法容纳时,减小弹窗顶部距离容器顶部的距离从而抬升弹窗
        // 还需判断抬升后弹窗顶部与视口顶部是否仍大于0,否则设置为置顶距离,即负的容器与视口顶部距离
        top = previewTop + bottom > 0 ? top + bottom : 0 - containerTop
      }
      return {
        top: top + 'px'
      }
})

完整代码

vue 复制代码
<!-- 实现图片悬浮右侧展开预览大图弹窗功能,弹窗顶部与图片顶部平齐 -->
<template>
  <div class="image_view">
    <div class="image_list" ref="listRef">
      <div class="image_item" v-for="(item, index) in imgList" :key="index">
        <img
        	:src="item"
        	class="img"
        	@mouseenter="e => handlePreview(e, item)"
        	@mouseleave="preview.show = false"/>
      </div>
      <div class="module_view" v-show="preview.show" :style="previewStyle">
        <img :src="preview.url" class="img" />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, computed } from 'vue'
import { getImg } from '@/utils/imgExample'

export default defineComponent({
  setup() {
    const imgList = ref(getImg(0, 12))
    const listRef = ref(null)
    const preview = reactive({
      top: 0,
      bottom: 0,
      url: '',
      show: false
    })
    const previewStyle = computed(() => {
      // 弹窗实际高度
      const previewHeight = 538
      const container = listRef.value
      // 容器与视口顶部距离
      const containerTop = container ? container.getBoundingClientRect().top : 0
      const previewTop = preview.top
      const previewBottom = preview.bottom
      // 弹窗顶部与容器顶部的距离
      let top = previewTop - containerTop
      let bottom = previewBottom - previewHeight
      // 判断弹窗顶部与视口底部的距离是否能容纳整个弹窗
      if (bottom < 0) {
        // 无法容纳时,减小弹窗顶部距离容器顶部的距离从而抬升弹窗
        // 还需判断抬升后弹窗顶部与视口顶部是否仍大于0,否则设置为置顶距离,即负的容器与视口顶部距离
        top = previewTop + bottom > 0 ? top + bottom : 0 - containerTop
      }
      return {
        top: top + 'px'
      }
    })
    // 获取当前图片顶部与视口顶部的距离top和底部的距离bottom
    const handlePreview = (e, url) => {
      const targetRect = e.target.getBoundingClientRect()
      preview.bottom = window.innerHeight - targetRect.top
      preview.top = targetRect.top
      preview.url = url
      preview.show = true
    }
    return {
      listRef,
      imgList,
      preview,
      previewStyle,
      handlePreview
    }
  }
})
</script>

<style lang="less" scoped>
.image_view {
  width: 100%;
  height: 100%;
  .image_list {
    position: relative;
    width: 404px;
    height: 100%;
    padding: 12px;
    border: 1px solid #ededed;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .image_item {
      width: 120px;
      height: 120px;
      border-radius: 4px;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .module_view {
      position: absolute;
      top: 0;
      right: -404px;
      width: 400px;
      height: 528px;
      background: #fff;
      box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.16);
      padding: 8px;
      border-radius: 12px;
    }
  }
}
</style>
相关推荐
默默coding的程序猿1 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉7 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽13 分钟前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课15 分钟前
React useEffect 详解与运用
前端·react.js
我想说一句16 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee12316 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干19 分钟前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录21 分钟前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
markyankee10123 分钟前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im24 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript