Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Fortschrittsbalkenkomponente zu kapseln

In der Webentwicklung ist die Fortschrittsbalkenkomponente eine häufige UI-Komponente, mit der der Fortschritt einer Aufgabe oder des Ladens einer Seite angezeigt wird. In Vue.js können wir basierend auf seiner leistungsstarken Komponentisierungsfunktion problemlos benutzerdefinierte Fortschrittsbalkenkomponenten kapseln und sie als Plug-Ins zur Wiederverwendung in verschiedenen Vue.js-Anwendungen kapseln. In diesem Artikel wird anhand eines vollständigen Beispiels einer Vue.js-Fortschrittsbalkenkomponente gezeigt, wie Sie das Vue.js-Plug-in verwenden, um die Fortschrittsbalkenkomponente zu kapseln.

VUE3-Basis-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Fortschrittsbalkenkomponente zu kapseln

1 Erste Einführung in die Vue.js-Fortschrittsbalkenkomponente

Die Vue.js-Fortschrittsbalkenkomponente ist nicht nur eine einfache UI-Komponente , aber auch ein Backend-Management-System Eine wesentliche und wichtige Komponente. Heute werden wir anhand einer Demonstration der Vue.js-Fortschrittsbalkenkomponente lernen, wie man das Vue.js-Plug-in zum Kapseln der Fortschrittsbalkenkomponente verwendet.

Zuerst müssen wir eine Fortschrittsbalkenkomponente definieren, die drei Hauptkomponenten umfasst: oberer Fortschrittsbalken, unterer Fortschrittsbalken und rechtes Statussymbol. Das Folgende ist der HTML- und CSS-Codeausschnitt dieser Komponente:

<div class="progress">
  <div class="progress-top"></div>
  <div class="progress-bottom"></div>
  <i class="icon"></i>
</div>

.progress {
  position: relative;
  height: 14px;
  margin: 5px 0;
  border-radius: 6px;
  background-color: #f2f2f2;
}

.progress-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #5e72e4;
  transition: width .2s ease-in-out;
  z-index: 2;
}

.progress-bottom {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #fff;
  transition: width .2s ease-in-out;
  z-index: 1;
}

.icon {
  position: absolute;
  top: -5px;
  right: -10px;
  font-size: 18px;
  color: #5e72e4;
}

Die entsprechende Funktion dieser Komponente besteht darin, einen Fortschrittsbalken anzuzeigen und zwei Parameter bereitzustellen: Mit dem Wert wird die Breite des Fortschrittsbalkens angepasst (0 ~ 100). und Farbe wird verwendet, um den Fortschritt anzupassen. Die Farbe des Balkens.

2. Verwenden Sie Vue.js, um die grundlegende Logik der Fortschrittsbalkenkomponente zu implementieren.

Als nächstes verwenden wir Vue.js, um die dynamischen Daten der Fortschrittsbalkenkomponente zu binden und die grundlegende Logik der Komponente zu implementieren.

Zuerst definieren wir zwei Variablen im Datenattribut der Vue-Komponente: progressValue und progressColor. Ersteres wird verwendet, um die Breite des Fortschrittsbalkens zu binden, und letzteres wird verwendet, um die Farbe des Fortschrittsbalkens zu binden.

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  }
  
  // ...组件的其他属性和方法
}

Als nächstes rendern wir im Vorlagenattribut der Komponente dynamisch den HTML-Code der Fortschrittsbalkenkomponente basierend auf den im Datenattribut definierten Variablen. Hauptsächlich durch die Bindung des Werts von progressValue ändert sich die Breite des Fortschrittsbalkens dynamisch, wenn die Daten aktualisiert werden:

<template>
  <div class="progress">
    <div class="progress-top" :style="{ width: progressValue + '%' }"></div>
    <div class="progress-bottom"></div>
    <i class="icon" :class="['fa', 'fa-circle-o-notch', 'spin', 'text-'+progressColor]"></i>
  </div>
</template>

Schließlich definieren wir im Methodenattribut der Komponente eine Aktualisierungsmethode, in der asynchrone Anforderungen über Ajax Get gestellt werden die Anfangsdaten des aktuellen Fortschrittsbalkens und rufen Sie die updateProgress-Methode auf, um die Komponentendaten zu aktualisieren:

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  },
  methods: {
    update() {
      // 模拟Ajax异步请求
      // 返回progressValue范围在0~100之间的随机数
      const progressValue = Math.floor(Math.random() * 100);
      if(progressValue > 0 && progressValue < 100) {
        this.updateProgress(progressValue, this.progressColor);
      }
    },
    updateProgress(value, color) {
      this.progressValue = value;
      this.progressColor = color;
    }
  }
}

Jetzt kann unsere Vue.js-Fortschrittsbalkenkomponente die Update-Methode übergeben und grundlegende Datenbindung und dynamische Aktualisierungen implementieren.

3. Verwenden Sie das Vue.js-Plug-in, um die Fortschrittsbalkenkomponente zu kapseln

Nach der vorherigen einfachen Implementierung haben wir einen verwendbaren Code für die Fortschrittsbalkenkomponente von Vue.js erhalten. Als Nächstes kapseln wir diesen Code in ein Vue.js-Plug-in.

Zuerst müssen wir ein neues VProgress-Plug-in in unserem Vue.js-Projekt erstellen und die globale Installationsmethode in der index.js-Datei des Plug-ins definieren, um die Vue.js-Fortschrittsbalkenkomponente zu registrieren:

import VProgress from './vprogress.vue';

const install = function(Vue) {
  Vue.component(VProgress.name, VProgress);
}

export default install;

Auf dieser Basis können wir auch zusätzliche globale Konfigurationselemente und globale Registrierungsmethoden für das Plug-in bereitstellen. Beispielsweise definieren wir ein globales Konfigurationselement für dieses Plug-in:

import VProgress from './vprogress.vue';

const defaults = {
  color: '#5e72e4',
  delay: 1000
};

const install = function(Vue, options = {}) {
  const { color, delay } = Object.assign({}, options, defaults);

  Vue.prototype.$vprogress = {
    update(value) {
      VProgress.methods.updateProgress.call({ progressColor: color }, value, color);
    },
    delay
  };

  Vue.component(VProgress.name, VProgress);
}

export default install;

Wir fügen ein globales Konfigurationselement für dieses Plug-in hinzu. Die Standardfarbe ist die Farbe des Fortschrittsbalkens und die Verzögerung ist das Intervall zwischen zwei Aktualisierungen. Jedes Mal, wenn wir den Fortschrittsbalken aktualisieren, können wir den Wert und die Farbwerte des Fortschrittsbalkens über globale Methoden wie die Methode Vue.prototype.$vprogress.update aktualisieren und das Aktualisierungsintervall über Vue.prototype steuern. $vprogress.delay-Zeit.

Abschließend packen wir den obigen Code und generieren eine verwendbare VProgress-Plugin-Instanz zur Verwendung in verschiedenen Vue.js-Projekten.

4. Verwendung der Vue.js-Fortschrittsbalkenkomponente

Jetzt verwenden wir das VProgress-Plug-in im neuen Vue.js-Projekt. Die Verwendungsmethode ist sehr einfach. Sie müssen sich nur über die Vue.use()-Methode in der Eingabedatei main.js der Vue-Anwendung registrieren:

import Vue from 'vue';
import VProgress from 'vprogress';

Vue.use(VProgress, {
  color: '#e74c3c',
  delay: 500
});

Hier können wir auch ein Optionsobjekt über Vue übergeben. Verwenden Sie die Methode(), um die Standardkonfigurationselemente des VProgress-Plug-Ins zu überschreiben.

Als nächstes müssen wir in der Vorlage nur die VProgress-Komponente direkt verwenden und die Methode $vporgress.update aufrufen, um den Wert und den Farbwert des Fortschrittsbalkens zu aktualisieren:

<template>
  <div class="app">
    <v-progress></v-progress>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const { update, delay } = this.$vprogress;
    setInterval(() => {
      const value = Math.round(Math.random() * 100);
      update(value);
    }, delay)
  }
}
</script>

Wir verwenden die Methode setInterval, um den Wert automatisch zu aktualisieren und Intervall des Fortschrittsbalkens Die Zeit wird durch $vprogress.delay festgelegt. Jedes Mal, wenn der Fortschrittsbalken Daten aktualisiert, werden die Wert- und Farbparameter des Fortschrittsbalkens automatisch aktualisiert zu den globalen Konfigurationselementen des Plug-Ins und den lokalen Konfigurationselementen des Projekts und der Verzögerungszeit.

5. Zusammenfassung

Durch die obige Demonstration haben wir gelernt, wie man das Vue.js-Plug-in verwendet, um die Fortschrittsbalkenkomponente zu kapseln und in der Vue.js-Anwendung wiederzuverwenden. Die Codebeispiele in diesem Artikel sollen Lesern, die neu bei Vue.js sind, dabei helfen, die grundlegenden Implementierungsmethoden von Vue.js-Plug-Ins und die grundlegende Implementierungslogik der Fortschrittsbalkenkomponente schnell zu verstehen und so eine Grundlage für die spätere Entwicklung benutzerdefinierter Produkte zu legen Komponenten und Plug-Ins.

Das obige ist der detaillierte Inhalt vonGrundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Fortschrittsbalkenkomponente zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!