So verwenden Sie Vue und Element-UI, um Fortschrittsbalken und Ladeanimationseffekte zu implementieren

So verwenden Sie Vue und Element-UI zum Implementieren von Fortschrittsbalken und zum Laden von Animationseffekten

Vue.js ist ein leichtes Front-End-Framework, und Element-UI ist eine auf Vue.js basierende UI-Komponentenbibliothek, die umfangreiche Komponenten bereitstellt und interaktive Effekte können uns helfen, schnell schöne Front-End-Schnittstellen zu entwickeln. In diesem Artikel wird erläutert, wie Sie mit Vue und Element-UI Fortschrittsbalken implementieren und Animationseffekte laden.

1. Element-UI installieren und einführen

Zuerst müssen Sie die Element-UI-Bibliothek installieren. Installieren Sie über npm oder Yarn:

npm install element-ui

Fügen Sie dann die Stile und Komponenten von Element-UI in Ihre Projekteintragsdatei (normalerweise main.js) ein:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Verwenden Sie die Fortschrittsbalkenkomponente

Element-UI stellt den bereit Die Komponente e88b9898c40893438c3c47b74d21f31f wird zur Anzeige des Fortschrittsbalkens verwendet. Sie können den Fortschritt des Fortschrittsbalkens steuern, indem Sie das Attribut percentage festlegen: e88b9898c40893438c3c47b74d21f31f 组件用于展示进度条。你可以通过设置 percentage 属性来控制进度条的进度：

<template>
  <el-progress :percentage="progress"></el-progress>
</template>

<script>
export default {
  data() {
    return {
      progress: 50
    };
  }
};
</script>

在上面的例子中，我们通过 progress 属性控制了进度条的进度为 50%。你可以根据实际需要，在 Vue 实例的数据中设置不同的 progress 值，从而实现动态的进度条效果。

3. 使用加载动画效果

Element-UI 提供了多种加载动画效果，包括骨架屏、加载中、折线图和雷达图等。你可以通过 63388405df0a04df98e38fc17215216b、85ad84baadb4310162f77a9565c97273、7bd1def68badf400cb93911c0640e528 和 6a6d805b0d5bc1e45a2198bde371ad89 等组件来使用这些效果。

下面以骨架屏和加载中为例：

3.1 使用骨架屏

骨架屏是一种常见的加载效果，它通常用于页面或组件加载时展示一个预定的骨架结构，增加用户的等待体验。

元素UI提供了 63388405df0a04df98e38fc17215216b 组件用于实现骨架屏效果。下面是一个简单的例子：

<template>
  <el-skeleton :loading="loading"></el-skeleton>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  }
};
</script>

在上面的例子中，我们通过 loading 属性控制了骨架屏的显示与隐藏。通过修改 loading 的值，你可以控制骨架屏的加载状态。

3.2 使用加载中

加载中是另一种常见的加载效果，它通常用于异步请求或操作时的等待提示。

元素UI提供了 85ad84baadb4310162f77a9565c97273 组件用于实现加载中效果。下面是一个简单的例子：

<template>
  <el-button @click="startLoading">点击开始加载</el-button>
</template>

<script>
export default {
  methods: {
    startLoading() {
      const loadingInstance = this.$loading({ text: '加载中...' });

      setTimeout(() => {
        loadingInstance.close();
      }, 2000);
    }
  }
};
</script>

在上面的例子中，我们通过调用 this.$loading 方法开始加载中效果，并通过 loadingInstance.close()rrreee

Im obigen Beispiel haben wir den Fortschritt des Fortschrittsbalkens über den progressauf 50 % gesteuert > Attribut. Sie können je nach tatsächlichem Bedarf unterschiedliche progress-Werte in den Daten der Vue-Instanz festlegen, um einen dynamischen Fortschrittsbalkeneffekt zu erzielen.

3. Ladeanimationseffekte verwenden

Element-UI bietet eine Vielzahl von Ladeanimationseffekten, einschließlich Skelettbildschirm, Laden, Liniendiagramm, Radardiagramm usw. Sie können 63388405df0a04df98e38fc17215216b, 85ad84baadb4310162f77a9565c97273, 7bd1def68badf400cb93911c0640e528 und 1de761e86b58361fba6cbbd398504fd9 und andere Komponenten, um diese Effekte zu nutzen.

Im Folgenden wird der Skelettbildschirm und das Laden als Beispiel genommen: 🎜

3.1 Verwendung des Skelettbildschirms

🎜Der Skelettbildschirm ist ein üblicher Ladeeffekt. Er wird normalerweise verwendet, um eine vorgegebene Skelettstruktur anzuzeigen, wenn eine Seite oder Komponente wird geladen, um die Wartezeit für den Benutzer zu erhöhen. 🎜🎜Element UI stellt die Komponente 63388405df0a04df98e38fc17215216b bereit, um den Skelett-Bildschirmeffekt zu erzielen. Hier ist ein einfaches Beispiel: 🎜rrreee🎜Im obigen Beispiel steuern wir das Ein- und Ausblenden des Skelettbildschirms über das Attribut loading. Durch Ändern des Werts von loading können Sie den Ladestatus des Skelettbildschirms steuern. 🎜

3.2 Laden verwenden

🎜Laden ist ein weiterer häufiger Ladeeffekt, der normalerweise zum Warten auf Eingabeaufforderungen bei asynchronen Anforderungen oder Vorgängen verwendet wird. 🎜🎜Die Element-Benutzeroberfläche stellt die Komponente 85ad84baadb4310162f77a9565c97273 bereit, um den Ladeeffekt zu erzielen. Hier ist ein einfaches Beispiel: 🎜rrreee🎜Im obigen Beispiel starten wir den Ladeeffekt, indem wir die Methode this.$loading aufrufen und die Methode loadingInstance.close() übergeben Die Methode beendet den Ladeeffekt. Sie können die Ladeanzeigezeit entsprechend den spezifischen Geschäftsanforderungen anpassen. 🎜🎜Fazit🎜🎜Durch die Einleitung dieses Artikels haben Sie gelernt, wie Sie Vue und Element-UI verwenden, um Fortschrittsbalken und Ladeanimationseffekte zu implementieren. Fortschrittsbalken können verwendet werden, um den Fortschritt von Vorgängen anzuzeigen, und Ladeanimationen können das Warteerlebnis des Benutzers erhöhen. Sie können andere von Element-UI bereitgestellte Komponenten und Effekte nach Ihren eigenen Bedürfnissen kombinieren, um Ihre Frontend-Oberfläche weiter zu bereichern. 🎜🎜In diesem Artikel werden nur einige grundlegende Verwendungsmethoden vorgestellt. Element-UI verfügt über viele andere Komponenten und Funktionen, die erkundet werden können. Wenn Sie an Element-UI interessiert sind, können Sie in der offiziellen Dokumentation nach weiteren Informationen suchen und Ihre Front-End-Entwicklungsfähigkeiten schnell verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI, um Fortschrittsbalken und Ladeanimationseffekte zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!