Beispielcode einer in Vue3 gekapselten Lupenkomponente

<Vorlage>
  <div Klasse="Warenbild">
    <div Klasse="Mitte">
      <img :src="Bilder[aktuellerIndex]" alt="">
    </div>
    <ul Klasse="klein">
      <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 } von 'vue'
Standard exportieren {
  Name: 'Warenbild',
  Requisiten: {
    Bilder:
      Typ: Array,
      Standard: () => []
    }
  },
  Setup (Requisiten) {
    Konstant aktuellerIndex = ref(0)
    return { aktuellerIndex }
  }
}
</Skript>
<style scoped lang="weniger">
.Warenbild {
  Breite: 480px;
  Höhe: 400px;
  Position: relativ;
  Anzeige: Flex;
  .Mitte {
    Breite: 400px;
    Höhe: 400px;
    Hintergrund: #f5f5f5;
  }
  .klein {
    Breite: 80px;
    li {
      Breite: 68px;
      Höhe: 68px;
      Rand links: 12px;
      Rand unten: 15px;
      Cursor: Zeiger;
      &:hover,&.aktiv {
        Rand: 2px durchgezogen @xtxColor;
      }
    }
  }
}
</Stil>

<Vorlage>
  <div Klasse="Warenbild">
+ // Erzielen Sie den großen Bildlayouteffekt rechts (vergrößern Sie das Hintergrundbild viermal)
+ <div Klasse="groß" :style="[{backgroundImage:`url(${images[currIndex]})`}]"></div>
    <div Klasse="Mitte">
      <img :src="Bilder[aktuellerIndex]" alt="">
+ // Bereiten Sie den Maskencontainer zum Verschieben vor + <div class="layer"></div>
    </div>
    <ul Klasse="klein">
      <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 } von 'vue'
Standard exportieren {
  Name: 'Warenbild',
  Requisiten: {
    Bilder:
      Typ: Array,
      Standard: () => []
    }
  },
  Setup (Requisiten) {
    Konstant aktuellerIndex = ref(0)
    return { aktuellerIndex }
  }
}
</Skript>
<style scoped lang="weniger">
.Warenbild {
  Breite: 480px;
  Höhe: 400px;
  Position: relativ;
  Anzeige: Flex;
+ Z-Index: 500;
+ // Rechts großer Bildstil+ .large {
+ Position: absolut;
+ oben: 0;
+ links: 412px;
+ Breite: 400px;
+ Höhe: 400px;
+ Box-Schatten: 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;
+ // Maskenstil+ .layer {
+ Breite: 200px;
+ Höhe: 200px;
+ Hintergrund: rgba(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;
      &:hover,&.aktiv {
        Rand: 2px durchgezogen @xtxColor;
      }
    }
  }
}
</Stil>

importiere { useMouseInElement } von '@vueuse/core'
const { elementX, elementY, istAußen } = useMouseInElement(Ziel)

<div v-if="isShow" class="large" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div>
<div Klasse="Mitte" ref="Ziel">
   <img :src="Bilder[aktuellerIndex]" alt="" />
   <div Klasse = "Ebene" v-if = "isShow" :style = "[Position]"></div>
</div>

aufstellen () {
// Der überwachte Bereich const target = ref(null)
// Anzeige und Ausblenden der Maskenebene und des Vorschaubilds steuern const isShow = ref(false)
// Definiere die Koordinaten der Maske const position = reactive({
      links: 0,
      oben: 0
})
// Koordinaten des Vorschaubildes rechts const bgPosition = reactive({
      HintergrundPositionX: 0,
      HintergrundPositionY: 0
})

return { Position, Hintergrundposition, Ziel, isShow}
}

const { elementX, elementY, istAußen } = useMouseInElement(Ziel)
  // Auf Wertänderungen basierend auf dem Listener watch([elementX, elementY, isOutside], () => { warten
    // Anzeige und Ausblenden über Flags steuern isShow.value = !isOutside.value
    wenn (istAußen.Wert) return
    // Steuerung des Koordinatenbereichs der X-Achse if (elementX.value < 100) {
      // Linke Seite position.left = 0
    } sonst wenn (elementX.value > 300) {
      // Rechte Seite position.left = 200
    } anders {
      // Mitte position.left = elementX.value - 100
    }
    // Steuerung des Koordinatenbereichs in Y-Richtung if (elementY.value < 100) {
      position.oben = 0
    } sonst wenn (elementY.value > 300) {
      position.oben = 200
    } anders {
      position.oben = elementY.wert - 100
    }
    // Berechnen Sie die Bewegungsdistanz des Vorschaubildes bgPosition.backgroundPositionX = -position.left * 2 + 'px'
    bgPosition.backgroundPositionY = -position.top * 2 + 'px'
    //Berechnen Sie die Position der Maskenebene position.left = position.left + 'px'
    position.oben = position.oben + 'px'
  })

<Vorlage>
  <div Klasse="Warenbild">
    <div v-if="isShow" class="large" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div>
    <div Klasse="Mitte" ref="Ziel">
      <img :src="Bilder[aktuellerIndex]" alt="" />
      <div Klasse = "Ebene" v-if = "isShow" :style = "[Position]"></div>
    </div>
    <ul Klasse="klein">
      <li v-for="(img, i) in Bildern" :key="img" :class="{ aktiv: 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: 'Warenbild',
  Requisiten: {
    Bilder:
      Typ: Array,
      Standard: () => []
    }
  },
  Setup (Requisiten) {
    Konstant aktuellerIndex = ref(0)
    const Ziel = ref(null)
    const isShow = ref(false)
    const position = reaktiv({
      links: 0,
      oben: 0
    })
    const bgPosition = reaktiv({
      HintergrundPositionX: 0,
      HintergrundPositionY: 0
    })
    const { elementX, elementY, istAußen } = useMouseInElement(Ziel)
    beobachten([elementX, elementY, isOutside], () => {
      istShow.value = !istOutside.value
      wenn (istAußen.Wert) return
      wenn (elementX.wert <= 100) {
        position.links = 0
      } sonst wenn (elementX.value >= 300) {
        position.links = 200
      } anders {
        position.links = elementX.wert - 100
      }
      wenn (elementY.value <= 100) {
        position.oben = 0
      } sonst wenn (elementY.value >= 300) {
        position.oben = 200
      } anders {
        position.oben = elementY.wert - 100
      }
      bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      position.links += 'px'
      position.oben += 'px'
    })
    return { aktuellerIndex, Ziel, istAnzeigen, Position, Hintergrundposition }
  }
}
</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;
    Hintergrund: #f5f5f5;
     Position: relativ;
    Cursor: bewegen;
    .Schicht {
      Breite: 200px;
      Höhe: 200px;
      Hintergrund: rgba(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>