使用vue3实现图片的放大效果

<template>

  <div class="goods-image">

    <!-- 大图 -->

    <div

      v-show="show"

      class="large"

      :style="[{ backgroundImage: `url(${images[currIndex]})` }, largePosition]"

    ></div>

    <!-- 中图 -->

    <div class="middle" ref="middle">

      <!-- 中图通过设置数组中的下标索引实现 -->

      <img :src="images[currIndex]" alt="" />

      <!-- 遮罩色块 -->

      <div v-show="show" class="layer" :style="maskposition"></div>

    </div>

    <!-- 小图 -->

    <ul class="small">

      <!-- 动态绑定每一张图片的src -->

      <li

        v-for="(item, index) in images"

        :key="item"

        :class="{ active: index === currIndex }"

      >

        <img @mouseenter="currIndex = index" :src="item" alt="" />

      </li>

    </ul>

  </div>

</template>

<script setup>

import { reactive, ref, watch } from 'vue'

// 使用vueuse/core

import { useMouseInElement } from '@vueuse/core'

// 定义当前预览图的索引

const currIndex = ref(0)

// 定义响应需要渲染的数据

const images = ref([

  'https://img1.baidu.com/it/u=2215715549,4273949142&fm=253&fmt=auto&app=138&f=JPEG',

  'https://img2.baidu.com/it/u=481755904,3535490584&fm=253&fmt=auto&app=138&f=JPEG',

  'https://img2.baidu.com/it/u=3650142422,1078095370&fm=253&fmt=auto&app=138&f=JPEG',

  'https://img1.baidu.com/it/u=1311237675,778506192&fm=253&fmt=auto&app=120&f=JPEG',

  'https://img2.baidu.com/it/u=2591611833,3173732768&fm=253&fmt=auto&app=138&f=JPEG'

])

// 1. 是否显示遮罩和大图

// 默认不显示遮罩层和大图

const show = ref(false)

// 2. 遮罩的坐标(样式)

const maskposition = reactive({

  left: 0,

  top: 0

})

// 3. 大图背景定位(样式)

const largePosition = reactive({

  backgroundPositionX: 0,

  backgroundPositionY: 0

})

// 4. 使用useMouseInElement得到基于元素左上角的坐标和是否离开元素数据

const middle = ref(null)

const { elementX, elementY, isOutside } = useMouseInElement(middle)

// 监听是否离开元素的位置

// watch前面设置需要监听的属性

watch([elementX, elementY, isOutside], () => {

  console.log(elementX.value, elementY.value, isOutside.value)

  // 5. 根据得到数据设置样式数据和是否显示数据

  // 判断得到的鼠标是否显示的值决定盒子是否显示

  show.value = !isOutside.value

  // 计算坐标

  const position = {

    x: 0,

    y: 0

  }

  if (elementX.value < 100) position.x = 0

  else if (elementX.value > 300) position.x = 200

  else position.x = elementX.value - 100

  if (elementY.value < 100) position.y = 0

  else if (elementY.value > 300) position.y = 200

  else position.y = elementY.value - 100

  // 给遮罩层赋值

  maskposition.left = position.x + 'px'

  maskposition.top = position.y + 'px'

  // 设置大图显示的背景位置

  largePosition.backgroundPositionX = -2 * position.x + 'px'

  largePosition.backgroundPositionY = -2 * position.y + 'px'

})

</script>

<style scoped lang="less">

.goods-image {

  width: 480px;

  height: 400px;

  position: relative;

  display: flex;

  z-index: 500;

  .large {

    position: absolute;

    top: 0;

    left: 412px;

    width: 400px;

    height: 400px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    background-repeat: no-repeat;

    background-size: 800px 800px;

    background-color: #f8f8f8;

  }

  .middle {

    width: 400px;

    height: 400px;

    background: #f5f5f5;

    position: relative;

    // cursor:move表示移入十字型

    cursor: move;

    img {

      width: 400px;

      height: 400px;

    }

    //cursor: pointer;

    .layer {

      width: 200px;

      height: 200px;

      background: rgba(0, 0, 0, 0.2);

      left: 0;

      top: 0;

      position: absolute;

    }

  }

  .small {

    width: 80px;

    list-style: none;

    li {

      width: 68px;

      height: 68px;

      margin-left: 12px;

      margin-bottom: 15px;

      cursor: pointer;

      img {

        width: 100%;

        height: 100%;

      }

      &:hover,

      &.active {

        border: 2px solid #27ba9b;

      }

    }

  }

}

</style>