Vue.js implementiert das Neun-Raster-Bildanzeigemodul

<Vorlage>
<div Klasse="SongList">
//Verwenden Sie eine v-for-Schleife, um Miniaturansichten zu rendern <div class="covers" :style="{display:MinDisplay}">
         <div class="cover" v-for="(img,index) in imgs" :key='img'><img :src="img.src" width="90%" class="min" @click="ZoomIn(index)" alt=""></div>
       </div>
 // Rendere das vergrößerte Bild <div class="max" :style="{display:display}">
            <div @click="ZoomOut" v-for="(img,index) in imgs" :key='img' :class="[index===ShowIndex?'active':'None']" ><img :src="img.src" width="100%"></div>
            //Navigationskarte unter dem vergrößerten Bild <div class="small">
                <div :class="[{'smallActive':index===ShowIndex},'cover-small']" v-for="(Bild,Index) in Bildern" :key='img' @click="select(index)" ><img :src="img.src" width="90%"></div>
            </div>
        </div>
    </div>
</Vorlage>

<Stilbereich>
    .SongList{
        Breite: 40%;
    }
    .covers{
        Anzeige: Flex;
        Inhalt ausrichten: Abstand dazwischen;
        Flex-Wrap: Umwickeln;
    }
    .Abdeckung{
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Breite: 33%;
        Rand: 10px 0;
    }
    .min{
        Rahmenradius: 10px;
        Cursor: Vergrößern;
    }
    .max{
        Cursor: Herauszoomen;
        Breite: 100 %;

    }
    .klein{
        Anzeige: Flex;
        Inhalt ausrichten: Abstand dazwischen;
        Flex-Wrap: Umwickeln;
    }
    .cover-klein{
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Breite: 10%;
        Rand: 10px 0;
        Deckkraft: 0,6;
        Cursor: Zeiger;
    }
    .cover-small:hover{
        Deckkraft: 1;
    }
    .aktiv{
        Anzeige: Flex;
    }
    .Keiner{
        Anzeige: keine;
    }
    .smallActive{
        Deckkraft: 1;
    }

</Stil>

<Skript>
    Standard exportieren {
        Name: "SongList",
        Daten:Funktion() {
            zurückkehren {
                ShowIndex:0,
                Anzeige: "keine",
                MinDisplay:'flex',
                //Wenn Sie eine v-for-Schleife zum Rendern von Bildern in einer Vue-Vorlage verwenden, können Sie den lokalen Speicherort der Bilddatei imgs nicht direkt verwenden:[
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                    {"src":erfordern('***.jpg')},
                ]

            };
        },
        Methoden:{
            ZoomIn(i){
               dies.Anzeige='Block';
                dies.MinDisplay='keine';
                dies.ShowIndex=i;
            },
            ZoomOut(){
                diese.Anzeige='keine';
                dies.MinDisplay='flex';
            },
            auswählen(i){
                dies.ShowIndex=i;


            }
        }
    }