Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite

<Vorlage>
  <div Klasse="Warenbild">
    <!-- Großes Bild in der Vorschau -->
    <div Klasse="groß" v-show="anzeigen" :style="[{ Hintergrundbild: `url(${images[currIndex]})` }, bgPosition]"></div>
    <!-- Produktbild-->
    <div Klasse="Mitte">
      <!-- Produktbild-->
      <img ref="Ziel" :src="Bilder[aktuellerIndex]" alt="" />
      <!-- Die Maus bewegt sich in die Maske des Bildes-->
      <div class="Ebene" v-show="anzeigen" :style="[Position]"></div>
    </div>
    <!-- Miniaturansicht -->
    <ul Klasse="klein">
      <li v-for="(img, i) in Bildern" :key="img" :class="{ aktiv: i === currIndex }">
        <!-- Bewegen Sie die Maus auf das kleine Bild neben dem großen Produktbild und das große Bild wird angezeigt-->
        <img @mouseenter="currIndex = i" :src="img" alt="" />
      </li>
    </ul>
  </div>
</Vorlage>
<Skript>
importiere { reaktiv, ref, watch } von 'vue'
importiere { useMouseInElement } von '@vueuse/core'
Standard exportieren {
  Name: 'Warenbild',
  Requisiten: {
    Bilder:
      Typ: Array,
      Standard: () => []
    }
  },
  setup(Requisiten) {
    // Anzeige und Ausblenden des Vorschaubilds und der Maskenebene steuern const show = ref(false)
    // Steuern, welches Bild im Produktbild angezeigt wird const currIndex = ref(0)
    // ref holt das DOM-Element const target = ref(null)
    // Notieren Sie die Koordinatenposition des maskierten halbtransparenten Bildes im Produktbild const position = reactive({
      oben: 0,
      links: 0
    })
    // Notieren Sie die Koordinatenposition des von der Maskenebene abgedeckten Bereichs im Vorschaubild const bgPosition = reactive({
      HintergrundPositionX: 0,
      HintergrundPositionY: 0
    })
    // Die vom Drittanbieter vueuse bereitgestellte Methode useMouseInElement ruft die Koordinaten der Maus in einem bestimmten Bereich ab const { elementX, elementY, isOutside } = useMouseInElement(target)
    // Der Listener überwacht die Koordinaten der Maus, wenn diese das Produktbild betritt, um die Maskenebene und den Vorschaubildeffekt zu manipulieren watch([elementX, elementY, isOutside], () => {
      // Wenn isisOutside.value wahr ist, bedeutet dies, dass die Maus das Zielelement nicht betreten hat. Wenn es falsch ist, bedeutet dies, dass die Maus das Zielelement betreten hat. // Wenn es wahr ist, werden die Koordinaten nicht aufgezeichnet, um Leistungsverluste zu vermeiden if (isOutside.value) {
        // Die Maskenebene und das Vorschaubild werden nicht angezeigt, wenn die Maus nicht das Zielelement berührt. show.value = false
        zurückkehren
      }
      // Wenn die Maus das Zielelement betritt, werden die Maskenebene und das Vorschaubild angezeigt.show.value = true
      // Bestimmen Sie den Grenzwert basierend auf der Größe der Maskenebene und der Größe des Produktbildes // Der Grenzwert von links (links, rechts)
      wenn (elementX.wert < 100) {
        position.links = 0
      } sonst wenn (elementX.value > 300) {
        position.links = 200
      } anders {
        position.links = elementX.wert - 100
      }
      // Grenzwerte von oben (oberer und unterer)
      wenn (elementY.value < 100) {
        position.oben = 0
      } sonst wenn (elementY.value > 300) {
        position.oben = 200
      } anders {
        position.oben = elementY.wert - 100
      }
      // Die Koordinaten des Teils des Produktbildes, der im Vorschaubild von der Maskenebene abgedeckt wird, plus die Einheit bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      // Die Maskenebene ist relativ zu den Koordinaten der oberen linken Ecke des Produktbildes plus der Einheit position.top += 'px'
      position.links += 'px'
    })
    // Kehren Sie mit return { currIndex, show, target, position, bgPosition } zur Vorlage zurück.
  }
}
</Skript>
<style scoped lang="weniger">
.Warenbild {
  Breite: 480px;
  Höhe: 400px;
  Position: relativ;
  Anzeige: Flex;
  Z-Index: 500;
  .groß {
    Position: absolut;
    oben: 0;
    links: 412px;
    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;
    Position: relativ;
    Cursor: bewegen;
    .Schicht {
      Breite: 200px;
      Höhe: 200px;
      Hintergrund: rgba(0, 0, 0, 0,2);
      links: 0;
      oben: 0;
      Position: absolut;
    }
  }
  .klein {
    Breite: 80px;
    li {
      Breite: 68px;
      Höhe: 68px;
      Rand links: 12px;
      Rand unten: 15px;
      Cursor: Zeiger;
      &:schweben,
      &.aktiv {
        Rand: 2px durchgezogen @xtxColor;
      }
    }
  }
}
</Stil>