So erzielen Sie mit Vue3 beispielsweise einen Lupeneffekt

npm installiere @vueuse/[email protected]

<Vorlage>
  <div Klasse="Warenbild">
    <!-- Großes Bild in der Vorschau -->
    <div Klasse="groß" :style='[{Hintergrundbild: `url(${images[currIndex]})`}, bgPosition]' v-show='isShow'></div>
    <div Klasse="Mitte" ref='Ziel'>
      <!-- Großes Bild links -->
      <img :src="Bilder[aktuellerIndex]" alt="">
      <!-- Maskenebene-->
      <div class="Ebene" :style='[Position]' v-show='isShow'></div>
    </div>
    <ul Klasse="klein">
      <!-- Miniaturbild rechts-->
       <li v-for="(img,i) in Bildern" :key="img" :class="{active:i===currIndex}">
        <img @mouseenter="currIndex=i" :src="img" alt="">
      </li>
    </ul>
  </div>
</Vorlage>
<Skript>
importiere { ref, watch, reactive } von 'vue'
importiere { useMouseInElement } von '@vueuse/core'

Standard exportieren {
  Name: 'Bildervergrößerung',
  Requisiten: {
    Bilder:
      Typ: Array,
      Standard: () => []
    }
  },
  Setup (Requisiten) {
    Konstant aktuellerIndex = ref(0)
    const Ziel = ref(null)
    const isShow = ref(false)
    //Koordinaten der Maskenebene const position = reactive({
      links: 0,
      oben: 0
    })
    // Position des Hintergrundbildes steuern const bgPosition = reactive({
      HintergrundPositionX: 0,
      HintergrundPositionY: 0
    })
    const { elementX, elementY, istAußen } = useMouseInElement(Ziel)
    // Auf Informationen zur Mausbewegung achten watch([elementX, elementY, isOutside], () => {
      // Bei jeder Wertänderung die neuen Daten lesen isShow.value = !isOutside.value
      // Die Maus befindet sich außerhalb des Bildbereichs, keine Koordinatenberechnung nötig if (isOutside.value) return
      // Horizontale Richtungwenn (elementX.value < 100) {
        // Linke Grenze position.left = 0
      } sonst wenn (elementX.value > 300) {
        // Rechte Grenze position.left = 200
      } anders {
        // Der mittlere Zustand position.left = elementX.value - 100
      }
      // Vertikale Richtungwenn (elementY.value < 100) {
        // Obere Grenze position.top = 0
      } sonst wenn (elementY.value > 300) {
        // Untere Rahmenposition.oben = 200
      } anders {
        // Der mittlere Zustand position.top = elementY.value - 100
      }
      // Konsole.log(ElementX.Wert, ElementY.Wert, IsOutside.Wert)
      //Berechnen Sie die Position des Vorschauhintergrunds bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      // Berechne die Position der linken Maskenebene position.left += 'px'
      position.oben += 'px'
    })
    return { aktuellerIndex, Ziel, istAnzeigen, Position, Hintergrundposition }
  }
}
</Skript>
<style scoped lang="weniger">
.Warenbild {
  Box-Größe: Rahmenbox;
  Breite: 480px;
  Höhe: 400px;
  Position: relativ;
  Anzeige: Flex;
  Z-Index: 500;
   img {
        Breite: 100 %;
        Höhe: 100%;
    }
  .groß {
    Position: absolut;
    oben: 0;
    links: 410px;
    Breite: 400px;
    Höhe: 400px;
    Kastenschatten: 0 0 10px rgba (0, 0, 0, 0,1);
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: 800px 800px;
    Hintergrundfarbe: #f8f8f8;
  }
  .Mitte {
    Breite: 400px;
    Höhe: 400px;
    Hintergrund: #f5f5f5;
    Position: relativ;
    Cursor: bewegen;
    .Schicht {
      Breite: 200px;
      Höhe: 200px;
      Hintergrund: rgba(0, 0, 0, 0,2);
      links: 0;
      oben: 0;
      Position: absolut;
    }
  }
  .klein {
    Rand: 0;
    Polsterung: 0;
    Breite: 80px;
    li {
      Breite: 68px;
      Höhe: 68px;
      Rand: 10px;
      Listenstil: keiner;
      Cursor: Zeiger;
      &:schweben,
      &.aktiv {
        Rand: 2px durchgezogen #27ba9b;
      }
    }
  }
}
</Stil>

Importieren Sie EnlargeImages aus „./enlarge-images.vue“.

Standard exportieren {
  installieren (App) {
    app.component(VergrößernBilder.name, VergrößernBilder)
  }
}

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren
// Eigene Kapselung importiere myUI aus './components'

createApp(App).verwenden(store).verwenden(router).verwenden(myUI).mount('#app')

<Vorlage>
  <div Klasse="Home-Banner">
    <!-- Lupeneffekt-->
    <Bilder vergrößern :images="Bilder"/>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "App",
  aufstellen() {
    const Bilder = [
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fcloud.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fground.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fnight.jpeg',
      'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fstreet.jpeg',
      „https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fsun.jpeg“
    ]

    return { Bilder }
  }
}
</Skript>

<style lang="less">
.home-banner {
  Breite: 1000px;
  Rand: 50px automatisch;
}
</Stil>