Vue3 realisiert den Bildlupeneffekt

<Vorlage>
  <div Klasse="Warenbild">
    <!-- Großer Bildcontainer -->
    <div
      Klasse="groß"
      :Stil="[
        {
          Hintergrundbild: `url(${imageList[curId]})`,
          HintergrundPositionX: Position.HintergrundPositionX,
          HintergrundPositionY: position.HintergrundPositionY,
        },
      ]"
      v-if="istAnzeigen"
    ></div>
    <div Klasse="Mitte" ref="Ziel">
      <img :src="imageList[curId]" alt="" />
      <!-- Maskencontainer -->
      <div Klasse = "Ebene" :style = "{ links: links + 'px', oben: oben + 'px' }" v-if = "isShow"></div>
    </div>
    <ul Klasse="klein">
      <li
        v-for="(img, i) in Bildliste"
        :Schlüssel="i"
        @mouseenter="aktuelleId = i"
        :Klasse="{ aktiv: curId === i }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
  </div>
</Vorlage>
 
<Skript>
importiere { reaktiv, ref, watch } von 'vue'
importiere { useMouseInElement } von '@vueuse/core'
Standard exportieren {
  Name: 'Warenbild',
  Requisiten: {
    Bildliste: {
      Typ: Array,
      Standard: () => {
        zurückkehren []
      }
    }
  },
  aufstellen () {
    const curId = ref(0)
    const Ziel = ref(null)
    // elementX: der Offsetwert der Maus von der linken Seite // elementY: der Offsetwert der Tabelle von oben // isOutside: ob es außerhalb des Containers liegt (true für außerhalb und false für innerhalb)
    const { elementX, elementY, istAußen } = useMouseInElement(Ziel)
    const left = ref(0) // Der Abstand vom Schieberegler nach links const top = ref(0) // Der Abstand vom Schieberegler nach oben const isShow = ref(false) // Großes Bild und Maskenbild ein- und ausblenden const position = reactive({ // Die Position der großen Bildanzeige, der Standardwert ist 0
      HintergrundPositionX: 0,
      HintergrundPositionY: 0
    })
    betrachten(
      //Überwachungsobjekt [elementX, elementY, isOutside],
      () => {
        wenn (elementX.wert < 100) {
          // Minimaler Abstand nach links left.value = 0
        }
        wenn (elementX.value > 300) {
          linker Wert = 200
        }
        wenn (elementX.value > 100 und elementX.value < 300) {
          linker.Wert = elementX.Wert - 100
        }
        wenn (elementY.value < 100) {
          // Mindestabstand links top.value = 0
        }
        wenn (elementY.value > 300) {
          Spitzenwert = 200
        }
        wenn (elementY.value > 100 und elementY.value < 300) {
          top.value = elementY.value - 100
        }
        // Bewegung des Hintergrundbildes steuern // 1. Die Bewegungsrichtung der Maskenebene ist entgegengesetzt zu der des Hintergrundbildes // 2. Da das Flächenverhältnis von Maskenebene und Hintergrundbild 1:2 beträgt, bewegt sich das Hintergrundbild für jedes Pixel, um das sich die Maskenebene bewegt, um zwei Pixel // backgrondPosition: x, y;
        position.backgroundPositionX = -left.value * 2 + 'px'
        position.backgroundPositionY = -top.value * 2 + 'px'
 
        // Wenn sich der Wert von isOutside ändert, negiere ihn sofort und weise ihn isShow zu
        // isOutside: Liegt es außerhalb des Containers? True für außerhalb und false für innerhalb
        istShow.value = !istOutside.value
      },
      {}
    )
    zurückkehren {
      aktuell,
      Ziel,
      links,
      Spitze,
      Position,
      istAnzeigen
    }
  }
}
</Skript>