Verwenden von vue3 zum Implementieren eines Beispiels für die Kapselung von Zählfunktionskomponenten

Vorwort

In diesem Artikel erfahren Sie, wie Sie mit vue3 eine globale Komponente kapseln, die die Zählfunktion implementiert. Ich glaube, Sie werden auf einen Blick das Anwendungsszenario erkennen, nämlich das Mengenauswahlmodul, das häufig auf Einkaufswebsites verwendet wird. Schauen wir uns an, wie man es implementiert.

1. Die Bedeutung der Kapselung

• Es gibt viele Stellen im Projekt, wo es benötigt wird
  
• Modulare Entwicklung reduziert Code-Redundanz und macht die Entwicklung effizienter
  
• Einmal verpacken, überall verwenden
  

2. Wie kapselt man?

1. Idee

Verwenden Sie v-model in vue3, um die gegenseitige Wertübertragung zwischen übergeordneten und untergeordneten Komponenten abzuschließen. Dieser Artikel verwendet das gekapselte useVModel in vueuse/core, um diese Funktion zu implementieren und den zu steuernden Wert aus der gekapselten öffentlichen Komponente auszuwerfen.

2. Vorbereitung

Abhängigkeiten installieren

Öffnen Sie ein beliebiges Terminal im Stammverzeichnis des Projekts und führen Sie „npm install @vueuse/[email protected]“ aus.

Kapselung globaler Komponenten

Registrieren Sie es wie im vorherigen Artikel über das Vue-Plug-In als globale Komponente

Hinweis: Dieser Artikel platziert die gekapselten globalen Komponenten unter src/components. Sie können den Dateispeicherort und den Namen selbst bestimmen.

Erstellen Sie eine neue Datei my-numbox.vue

Der Code lautet wie folgt (Beispiel):

<Vorlage>
  <div Klasse="meine-numbox">
    <div Klasse="Bezeichnung">
      <slot>Menge</slot>
    </div>
    <div Klasse="numbox">
      <a href="javascript:;" @click="toggle(-1)" :class="{notallow: modelValue === 1}">-</a>
      <Eingabetyp="Text" schreibgeschützt :Wert="Nummer">
      <a href="javascript:;" @click="toggle(1)" :class="{notallow: modelValue === Bestandsaufnahme}">+</a>
    </div>
  </div>
</Vorlage>
<Skript>
importiere { useVModel } von '@vueuse/core'
Standard exportieren {
  Name: 'MyNumbox',
  Requisiten: {
    Modellwert: {
      Typ: Nummer,
      Standard: 1
    },
    Inventar:
      Typ: Nummer,
      erforderlich: true
    }
  },
  setup (eigenschaften, { emit }) {
    // Bidirektionale Bindung von Daten, die durch eine Drittanbietermethode gesteuert werden const num = useVModel(props, 'modelValue', emit)
    // Änderungsvorgang der Produktdaten steuern const toggle = (n) => {
      wenn (n < 0) {
        // Eine Operation subtrahieren, wenn (num.value > 1) {
          num.value -= 1
        }
      } anders {
        // Eine Operation hinzufügen if (num.value < props.inventory) {
          num.value += 1
        }
      }
    }
    return { num, umschalten }
  }
}
</Skript>
<style scoped lang="weniger">
.meine-numbox {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  .nichtzulassen {
    Cursor: nicht erlaubt;
  }
  .Etikett {
    Breite: 60px;
    Farbe: #999;
    Polsterung links: 10px;
  }
  .numbox {
    Breite: 120px;
    Höhe: 30px;
    Rand: 1px durchgezogen #e4e4e4;
    Anzeige: Flex;
    > ein {
      Breite: 29px;
      Zeilenhöhe: 28px;
      Textausrichtung: zentriert;
      Textdekoration: keine;
      Hintergrund: #f8f8f8;
      Schriftgröße: 16px;
      Farbe: #666;
      &:erster-vom-Typ {
        Rahmen rechts: 1px durchgezogen #e4e4e4;
      }
      &:letzter-vom-Typ {
        Rahmen links: 1px durchgezogen #e4e4e4;
      }
    }
    > Eingabe {
      Breite: 60px;
      Polsterung: 0,5px;
      Textausrichtung: zentriert;
      Farbe: #666;
    }
  }
}
</Stil>

Ich werde Ihnen hier nicht die Schritte zur Registrierung als globale Komponente über das Vue-Plugin zeigen. Sie können den vorherigen Artikel lesen
vue3 – den Lupeneffekt selbst erleben

2. Verwendung

Verwenden Sie es einfach in jeder Datei mit der Endung .vue

Der Code lautet wie folgt (Beispiel):

Der Inhalt des Komponenten-Tags überschreibt den Inhalt des Standard-Slots in der öffentlichen Komponente

Der Lagerbestand ist die Lagermenge, also der Maximalwert, den der Benutzer auswählen kann (hier ist ein fester Wert zur Veranschaulichung)

<Vorlage>
  <div Klasse="Home-Banner">
    <MyNumbox v-model="num" :inventory="5">Anzahl der Artikel:</MyNumbox>
  </div>
</Vorlage>

<Skript>
importiere { ref } von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen () {
    Konstante Nummer = Ref(1)
    return { Zahl}
  }
}
</Skript>

<style lang="less">
.home-banner {
  Rand: 100px automatisch;
  Breite: 500px;
  Höhe: 100px;
}
</Stil>

3. Wirkungsdemonstration

Sie sehen, dass unsere Anforderungen erfüllt wurden. Wenn der Maximal- oder Minimalwert erreicht ist, können Sie ihn durch Klicken auf die Schaltfläche deaktivieren.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von vue3 zur Implementierung des Kapselungsbeispiels für Zählfunktionskomponenten. Weitere relevante Inhalte zu Vue3-Zählfunktionskomponenten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!