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>
相关推荐
珍宝商店37 分钟前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown38 分钟前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿2 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.3 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰3 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息3 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC4 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi
卷Java4 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19985 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos