Vue3 实现产品图片放大器

Vue3 实现类似淘宝、京东产品详情图片放大器功能

环境:vue3+ts+vite

1.创建picShow.vue组件

javascript 复制代码
<script lang="ts" setup>
import {ref, computed} from 'vue'
import {useMouseInElement} from '@vueuse/core'

/*获取父组件的传值*/
defineProps<{
    images: string[]
}>()
// 当前显示的图片索引
let active = ref(0)
// ref 获取 DOM 元素的位置
const target = ref(null)
// isisOutside为 true 的时候代表鼠标未进入目标元素,为 false 时代表鼠标进入目标元素
const {elementX, elementY, isOutside} = useMouseInElement(target)
// 遮罩半透明图在商品大图中的坐标位置
const position = computed(() => {
    let x = elementX.value - 70
    let y = elementY.value - 70
    if (x <= 0) x = 0
    if (x >= 140) x = 140
    if (y <= 0) y = 0
    if (y >= 140) y = 140
    return {x, y}
})
</script>
<template>
    <div class="product-image">
        <!-- 放大 -->
        <div class="large" :style="[{ backgroundImage: `url(${images[active]})`,
          backgroundPosition: `-${position.x * 2}px -${position.y * 2}px`
        }]" v-show="!isOutside"></div>
        <div ref="target" class="middle">
            <img :src="images[active]" alt=""/>
            <!-- 遮罩层 -->
            <div class="layer" v-show="!isOutside" :style="{ left: `${position.x}px`, top: `${position.y}px` }"></div>
        </div>
        <ul class="small">
            <li v-for="(item, index) in images" :key="item"
                    :class="{ active: index === active }"
                    @mouseenter="active = index">
                <img :src="item" alt=""/>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.product-image {
  position: relative;
  z-index: 500;
  .large {
    position: absolute;
    top: 0;
    left: 290px;
    width: 500px;
    height: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 156% 156%;
    background-color: #f8f8f8;
  }
  .middle {
    width: 280px;
    height: 280px;
    background: #f5f5f5;
    position: relative;
    cursor: move;
    .layer {
      width: 140px;
      height: 140px;
      background: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      position: absolute;
    }
    img{
      width: 280px;
      height: 280px;
    }
  }
  .small {
    width: 280px;
    display: flex;
    margin-top: 5px;
    li {
      width: 70px;
      height: 70px;
      cursor: pointer;
      list-style: none;
      img{
        width: 70px;
        height: 70px;
      }
    }
  }
}
</style>

2.在其他页面引用组件picShow.vue

javascript 复制代码
<div class="product-info">
   <div class="media">
        <PicShow :images="picList"/>
    </div>
</div>

//js部分
import PicShow from "@/components/picShow.vue";
const picList=[
    '/src/assets/images/contactus01.jpg',
    '/src/assets/images/contactus02.jpg',
    '/src/assets/images/contactus03.jpg',
    '/src/assets/images/contactus04.jpg',
]

效果:

相关推荐
迷路的小绅士3 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
小希爸爸13 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师29 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭30 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码37 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger43 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话43 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时43 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳44 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子1 小时前
深入解析 iframe
前端