Vue3 kapselt die Textskelett-Effektkomponente der Seitennavigation

<Vorlage>
  <div class="skelett" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 Schachtel -->
    <div Klasse="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 Blitzeffekt-XTX-Skelett-Pseudoelemente--->
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Skelett',
  // Bei Verwendung müssen Sie Höhe, Breite und Hintergrundfarbe dynamisch festlegen und angeben, ob Requisiten blinken sollen: {
    bg: {
      Typ: Zeichenfolge,
      Standard: „#efefef“
    },
    Breite: {
      Typ: Zeichenfolge,
      Standard: „100px“
    },
    Höhe:
      Typ: Zeichenfolge,
      Standard: „100px“
    },
    animiert:
      Typ: Boolean,
      Standard: false
    }
  }
}
</Skript>
<style scoped lang="weniger">
.skelett {
  Anzeige: Inline-Block;
  Position: relativ;
  Überlauf: versteckt;
  vertikale Ausrichtung: Mitte;
  .block {
    Breite: 100 %;
    Höhe: 100%;
    Rahmenradius: 2px;
  }
}
.shan
  &::nach {
    Inhalt: "";
    Position: absolut;
    Animation: Shan 1,5 s Leichtigkeit 0 s unendlich;
    oben: 0;
    Breite: 50%;
    Höhe: 100%;
    Hintergrund: linearer Farbverlauf(
      nach links,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0,3) 50 %,
      rgba(255, 255, 255, 0) 100 %
    );
    transformieren: skewX(-45 Grad);
  }
}
@keyframes shan {
  0% {
    links: -100%;
  }
  100 % {
    links: 120 %;
  }
}
</Stil>

// Erweitern Sie die ursprünglichen Funktionen von Vue: globale Komponenten, benutzerdefinierte Anweisungen, Mounten von Prototypmethoden, Hinweis: Es gibt keinen globalen Filter.
// Dies ist das Plugin // Vue2.0-Plugin schreibt Elemente: Exportiere ein Objekt, habe eine Installationsfunktion, übergebe standardmäßig den Vue-Konstruktor und erweitere auf der Grundlage von Vue // Vue3.0-Plugin schreibt Elemente: Exportiere ein Objekt, habe eine Installationsfunktion, übergebe standardmäßig die App-Anwendungsinstanz und erweitere auf der Grundlage der App. Importiere Skeleton aus „./skeleton.vue“.

Standard exportieren {
  installieren (App) {
    // Erweitern Sie die App, die App bietet eine Komponentendirektivfunktion // Wenn Sie den Prototypen mit der Methode app.config.globalProperties mounten möchten, app.component(Skeleton.name, Skeleton)
  }
}

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere MyUI aus „./components/library“

// Um ​​das Plugin zu verwenden, verwenden Sie app.use(plugin) in main.js
createApp(App).verwenden(store).verwenden(Router).verwenden(MyUI).mount('#app')

<span v-else>
  <Skelett Breite="60px" Höhe="18px" Stil="Rand rechts:5px" bg="rgba(255,255,255,0.2)" :animiert="true" />
  <Skelett Breite="50px" Höhe="18px" bg="rgba(255,255,255,0.2)" :animiert="true" />
</span>