Detaillierte Erklärung der Kapselung und Verwendung der Vue-Bildvergrößerungskomponente

<Vorlage>
  <div>
    <div class="bewegen" @mouseover="über()" @mouseout="raus()" @mousemove="bewegen($event)">
      <div id="small"> //Kleines Bild und Maskenebenen-Container<div id="float"></div> //Maskenebene<img :src="item" id="smallimg"> //Zu vergrößerndes Bild</div>
    </div>
    <div id="groß">
      <img :src="item"> //Vergrößertes Bild</div>
  </div>
</Vorlage>

<Skript>
  var float, smallimg, groß, großesBild, klein, float_maxJL_t, float_maxJL_l, großesBild_maxJL_t, großesBild_maxJL_l;

  Standard exportieren{
    Requisiten: {
      Artikel:
        Typ: Zeichenfolge
      }
    },
    Daten() {
     zurückkehren {
     }
    }, 

    montiert(){
      float = document.getElementById("float"); //Linke Maskenebene smallimg = document.getElementById("smallimg"); //Kleines Bild links big = document.getElementById("big"); //Rechter sichtbarer Bereich bigImg = big.getElementsByTagName("img")[0]; //Rechtes großes Bild small = document.getElementById("small");// Container links //Breite und Höhe des rechten sichtbaren Bereichs abrufen var bigW = big.clientWidth;
      var bigH = big.clientHeight;

      //Breite und Höhe des großen Bildes rechts var bigImgW = bigImg.offsetWidth;
      var bigImgH = bigImg.offsetHeight;

      //Breite und Höhe des kleinen Bildes links var smallImgW = smallimg.offsetWidth;
      var smallImgH = smallimg.offsetHeight;

      //Breite und Höhe der linken Maskenebene float.style.width = bigW/bigImgW * smallImgW + "px"; //175
      float.style.height = großeH/großesBild * kleinesBild/3*2 + "px";     

      //Die maximale Distanz der Bewegung der Maskenebene float_maxJL_l = small.clientWidth -float.offsetWidth-10;
      float_maxJL_t = kleine.Clienthöhe – float.Offsethöhe – 5;

      //Die maximale Distanz, über die sich das rechte Bild bewegt bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;
      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;

      big.style.display = "keine";
      float.style.visibility = "hidden"; //Die Maus hat sich nicht in den linken Bereich bewegt, daher sind die Maskenebene und das große Bild rechts unsichtbar},

    Methoden: {
    //Bewegen Sie die Maus in den linken Bereich, um die Maskenebene und das große Bild rechts darüber sichtbar zu machen: function () {
        float.style.visibility = "sichtbar";
        big.style.visibility = "sichtbar";
        großer.Stil.Anzeige = "Block";
      }, 

      //Bewegen Sie die Maus aus dem linken Bereich, um die Maskenebene und das große Bild rechts unsichtbar zu machen: function () {
        float.style.visibility = "versteckt";
        big.style.display = "keine";
      }, 

      //Wenn die Maus bewegt wird, bewegt sich die Maskenebene mit der Mausbewegung: function (ev) {
        var l = ev.clientX – klein.OffsetLinks – float.OffsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        if( l < 0 ) l = 0; // Wert wird auf 0 gesetzt, wenn er die linke Grenze überschreitet
        if( t < 0 ) t = 0; // Wert überschreitet die Obergrenze und wird auf 0 gesetzt

        if( l > float_maxJL_l ) l = float_maxJL_l; //Bewegungsbereich innerhalb des Containers begrenzen if( t > float_maxJL_t ) t = float_maxJL_t;

        //Verhältnis finden var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

         //Bewegungsposition der Maskenebene float.style.left = l + "px";
        float.style.top = t + "px"; 

         //Bewegungsposition des großen Bildes auf der rechten Seite bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
      },
    },
  }
</Skript>

//CSS-Stil <style lang="scss" rel="stylesheet/scss" scoped>
  @import 'src/assets/scss/variable.scss';
  #schweben {
    Breite: 120px;
    Höhe: 120px;
    Position: absolut; //Erforderlicher Hintergrund: $primary;
    Rand: 1px durchgezogen #ccc;
    Deckkraft: 0,5;
    Cursor: bewegen;
  }
  #groß {
    Position: absolut; //Erforderlich oben: 260px;
    links: 37,6 %;
    Breite: 350px;
    Höhe: 500px;
    Überlauf: versteckt;
    Rand: 1px durchgezogen #ccc;
    Hintergrund: #ffffff;
    Z-Index: 1;
    Sichtbarkeit: versteckt;
  }
  #klein {
    Position: relativ; //Erforderlicher Z-Index: 1;
    img{
      Breite: 340px;
      Höhe: 320px;
    }
  }
  #großes Bild {
    Position: absolut; //Erforderlicher Z-Index: 5;
    Breite: 700px;
    Höhe: 700px;
  }
</Stil>

Bewegung = Funktion (ev){
        var scroll = this.getClientHeight(); //Aktuelle Bewegungsposition der Schnittstelle abrufen var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        t=t+scroll; //Die Höhe der Maskenebene sollte entsprechend zur Scrollhöhe der Schnittstelle addiert werden, wenn (l < 0) l = 0;
        wenn (t < 0) t = 0; 

        wenn (l > float_maxJL_l) l = float_maxJL_l;
        wenn (t > float_maxJL_t) t = float_maxJL_t;

        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

        float.style.left = l + "px";
        float.style.top = t + "px";

        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
},
//Methode zum Abrufen der Scrollhöhe der Schnittstelle getClientHeight: function(){
    var scrollTop=0;
    wenn(Dokument.Dokumentelement&Dokument.Dokumentelement.ScrollTop)
    {
      scrollTop=Dokument.Dokumentelement.scrollTop;
    }
    sonst wenn(Dokument.Text)
    {
      scrollTop=Dokument.Hauptteil.scrollTop;
    }
    scrollTop zurückgeben;
}