Beispielcode einer in Vue3 gekapselten Lupenkomponente

Inhaltsverzeichnis

Komponenteninfrastruktur
Zweck: Realisierung der Bildlupenfunktion
Installieren Sie vueuse
Funktionalität
Vollständiger Code
Zusammenfassen

Komponenteninfrastruktur

Am Ende befindet sich ein vollständiger Code, der kopiert und direkt verwendet werden kann

Zweck: Kapselung der Bildvorschau-Komponente, um den Mouseover-Umschalteffekt zu erzielen

Landecode:

<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>

Bildlupe

Zweck: Realisierung der Bildlupenfunktion

Schritt:

Bereiten Sie zuerst den großen Bildcontainer und den Maskencontainer vor
Verwenden Sie dann die Methode useMouseInElement von @vueuse/core, um den elementbasierten Offset zu erhalten
Berechnen Sie die Position des Maskencontainers und die Position des großen Containerhintergrunds und stellen Sie die Daten der Vorlage zur Verwendung zur Verfügung

Landecode:

<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>

Installieren Sie vueuse

npm ich @vueuse/core@5.3.0

Derzeit ist Version 5.3.0 relativ stabil

Grundlegende Verwendung der von vueuse bereitgestellten Abhörmethode zum Eingeben des angegebenen Bereichs

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

Der Methodenparameter target stellt das überwachte DOM-Objekt dar; die Rückgabewerte elementX und elementY stellen die Positionsinformationen der oberen linken Ecke des überwachten DOM dar, links und oben; isOutside gibt an, ob es innerhalb des Bereichs des DOM liegt, true bedeutet, dass es außerhalb des Bereichs liegt. „Falsch“ bedeutet, innerhalb des Bereichs.

Funktionalität

<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'
  })

Vollständiger Code

<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>

Zusammenfassen

Dies ist das Ende dieses Artikels über die gekapselte Lupenkomponente von Vue3. Weitere relevante Inhalte zur gekapselten Lupenkomponente von Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren: