Vue implementiert die Lupenfunktion der Produktdetailseite

<div Klasse="ProduktLinks">
   <!-- Bild links Mitte -->
     <div Klasse="mdImg">
         <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt="">
     </div>
     <!-- Maskenebene-->
     <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></div>
     <!-- Maskenebene Glas SuperMarks-->
     <div @mouseenter="eingeben" @mouseleave="verlassen" @mousemove="Markierungen" class="superMarkierungen" ></div>
     <!--Kleines Bild links-->
     <div Klasse="smImg" >
         <!--Linke Taste-->
         <div @click="vorherige" Klasse="button-vorherige">
             <img src="../assets/icon/prev.png" >
         </div>
         <div Klasse="smImgUl">
             <ul :style="{'margin-left':marginLeft+'px'}">
                 <li @mouseenter="enterLi(index)" v-for="(Element,Index) der Liste" :key="index">
                     < img :src="require('../assets/imgs/details/'+item.sm)" alt="">
                 </li>
             </ul>
         </div>
         <!-- Rechte Taste -->
         <div @click="weiter" class="button-weiter">
             <img src="../assets/icon/next.png" >
         </div>
     </div>
    <!-- Großes Bild links -->
     <div v-show="isShow" Klasse="lgImg">
         <img :src="require('../assets/imgs/details/'+lgImgUrl)" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}">
     </div>
</div>

< Skript >
importiere headerT aus "./common/headerT.vue"
Header aus „./common/Header.vue“ importieren
Standard exportieren {
    Daten() {
        zurückkehren {
            Liste:[{"sm":"s1.png","md":"s1.png","lg":"s1.png"},
            {"sm":"s2.png","md":"s2.png","lg":"s2.png"},
            {"sm":"s3.png","md":"s3.png","lg":"s3.png"},
            {"sm":"s4.png","md":"s4.png","lg":"s4.png"},
            {"sm":"s5.png","md":"s5.png","lg":"s5.png"},
            {"sm":"s6.png","md":"s6.png","lg":"s6.png"},
            {"sm":"s7.png","md":"s7.png","lg":"s7.png"},
            {"sm":"s8.png","md":"s8.png","lg":"s8.png"}],
            mdImgUrl:"s1.png",
            lgImgUrl:"s1.png",
            ulIndex:0, //Ein paar li nach links bewegen
            marginLeft:0, //Die Distanz zum Verschieben nach links und rechts isShow:false, //Steuert, ob die Markierungen der Maskenebene und große Bilder angezeigt werden"
            left:0, //markiert linke Position top:0, //markiert untere Position leftLgImg:0, //großes Bild lgImg Position verschieben topLgImg:0 //großes Bild lgImg Position verschieben }
    },
    Methoden: {
        //Wenn die Maus das kleine Bild betritt, wird das entsprechende mittlere Bild angezeigt enterLi(e){
            //e ist der entsprechende Index//console.log(e);
            diese.mdImgUrl=diese.list[e].md;
            diese.lgImgUrl=diese.list[e].lg;
        },

        //Klicken Sie auf die linke und rechte Schaltfläche, um das li in ul zu verschieben. Jedes li ist 74 Pixel breit und ul ist 370 Pixel breit, um 5 li anzuzeigen.
        vorherige(){
            //Nach links bewegen -
            wenn(dieser.ulIndex>-(diese.Liste.Länge-5)){
                dies.ulIndex--;
                dies.marginLeft=dies.ulIndex*74;
                //Konsole.log(dieser.ulIndex)
            }
        },
        nächste(){
            //Nach rechts bewegen++
            wenn(dieser.ulIndex<0){
                 dies.ulIndex++;
                dies.marginLeft=dies.ulIndex*74;
                //Konsole.log(dieser.ulIndex)
            }
        },
        
        //Maus betritt und verlässt enter(){
            this.isShow=true
        },
        verlassen(){
            this.isShow=false
        },
        //Maskenebene Lupenmarkierungen(e){
            //console.log(e.offsetX,e.offsetY) //Die Position der Maus, wenn sie sich bewegt
            var marksWidth=200;//Markierungsbreite var marksHeight=200;//Markierungshöhe this.left=e.offsetX-marksWidth/2;   
            dies.oben=e.offsetY-marksHeight/2;
            //Konsole.log(dies.links,dies.oben) 
            wenn(dies.links<0){
                dies.links=0;
            }sonst wenn(dies.links>250){
                dies.links=250;
            }
            wenn(dieses.top<0){
                dies.oben=0;
            }sonst wenn(dieses.top>250){
                dies.oben=250;
            }
            //Konsole.log(dies.links,dies.oben) 
            
            // Die Breite und Höhe des mittleren Bild-Divs beträgt 450 und die Breite und Höhe des großen Bild-Divs beträgt 800
            dies.leftLgImg=-dies.left*800/450;
            dies.topLgImg=-dieses.top*800/450;
        }
    },
    berechnet: {
    },
    Komponenten: {
        "headerone":headerT,
        "headertwo":Überschrift
    },
    betrachten:
    },
}
</Skript>

<Stilbereich>

    .Inhalt{
        Breite: 1200px;
        Rand: 0 automatisch;
    }
    .Inhalt>.Produkt{
        Anzeige: Flex;
        Inhalt ausrichten: Abstand dazwischen;
    }
    /* Bildstil für die linke Seitengröße*/
    .productLeft{
        Breite: 450px;
        Position: relativ;
    }
    /* Mittleres Bild links */
    .mdImg,.mdImg>img{
        Breite: 450px;
        Höhe: 450px;
    }
    /*Maskenebene SuperMarks */
    .superMarks{
        Breite: 450px;
        Höhe: 450px;
        Hintergrundfarbe: rgba (220, 220, 220, 0);
        Position: absolut;
        oben: 0px;
        links: 0px;
    }
    /* Maskenebene*/
    .Markierungen{
        Breite: 200px;
        Höhe: 200px;
        Position: absolut;
        Hintergrundfarbe: rgba (220, 220, 220, 0,5);
        /*top:0px; //Inline setzt dynamisches Top und Links
        links:0px;*/
    }
    /* Kleines Bild links */
    .smImg{
        Anzeige: Flex;
        Elemente ausrichten: zentrieren;
        Inhalt ausrichten: Abstand dazwischen;
        Überlauf: versteckt;
    }
    .smImgUl{
        Überlauf: versteckt;
        Breite: 370px;
    }
    .smImg ul{
        Anzeige: Flex;
        Breite: 370px;
        Rand: 0;
        Polsterung: 0;
    }
    .smImg ul>li{
        Polsterung: 0 3px;
    }
    .smImg img{
        Höhe: 60px;
        Rand: 4px;
    }
    /*Großes Bild links ausblenden*/
    .lgImg{
        Breite: 400px;
        Höhe: 400px;
        Überlauf: versteckt;
        Position: absolut;
        oben: 0px;
        links: 450px;
        Rand: 2px durchgezogen #aaa;
        Hintergrundfarbe: #fff;
    }
    .lgImg img{
        Breite: 800px;
        Höhe: 800px;
        Position: absolut;
        /*oben:100px;
        links: 100px;*/
    }

    /* Produkt rechte Seite */
    .ProduktRechts{
        Breite: 700px;
        
    }
    /* Linke und rechte Taste */
    .button-prev,.button-next{
        Breite: 35px;
        Höhe: 35px;
        Zeilenhöhe: 30px;
        Rand: 1px durchgezogen #ddd;
        Randradius: 50 %;
        Textausrichtung: zentriert;
    }
    .button-prev:hover,.button-next:hover{
        Hintergrundfarbe:#eee;
    }
    .button-prev>img,.button-next>img{
        Breite: 20px;
        Höhe: 20px;
    }
</Stil>