Vue - benutzerdefinierte gekapselte Schaltflächenkomponente

Der benutzerdefinierte Kapselungscode der Vue-Button-Komponente dient Ihnen als Referenz. Der spezifische Inhalt ist wie folgt

Kapseln Sie die Schaltflächenkomponente button.vue

<Vorlage>
  <button class="Schaltflächenellipsis" :class="[Größe,Typ]">
    <Steckplatz />
  </button>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Schaltfläche',
  Requisiten: {
    Größe: {
      Typ: Zeichenfolge,
      Standard: „Mitte“
    },
    Typ: {
      Typ: Zeichenfolge,
      Standard: „Standard“
    }
  }
}
</Skript>
<style scoped lang="weniger">
.Taste {
  Aussehen: keines;
  Rand: keiner;
  Gliederung: keine;
  Hintergrund: #fff;
  Textausrichtung: zentriert;
  Rand: 1px durchgehend transparent;
  Rahmenradius: 4px;
  Cursor: Zeiger;
}
.groß {
  Breite: 240px;
  Höhe: 50px;
  Schriftgröße: 16px;
}
.Mitte {
  Breite: 180px;
  Höhe: 50px;
  Schriftgröße: 16px;
}
.klein {
  Breite: 100px;
  Höhe: 32px;
  Schriftgröße: 14px;  
}
.mini {
  Breite: 60px;
  Höhe: 32px;
  Schriftgröße: 14px;  
}
.Standard {
  Rahmenfarbe: #e4e4e4;
  Farbe: #666;
}
.primär {
  Rahmenfarbe: #27BA9B;
  Hintergrund: #27BA9B;;
  Farbe: #fff;
}
.schmucklos {
  Rahmenfarbe: #27BA9B;
  Farbe: #27BA9B;;
  Hintergrund: aufhellen (#27BA9B;,50%);
}
.grau {
  Rahmenfarbe: #ccc;
  Hintergrund: #ccc;;
  Farbe: #fff;
}
</Stil>

Verwendung von Paketkomponenten

<Button type="primary" style="margin-top:20px;">Benutzerdefinierter Schaltflächenname</Button>
<Button type="primary" style="margin-top:20px;">Zum Warenkorb hinzufügen</Button>

Ergebnisse erzielen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Detaillierte Erklärung des Ereignisses zum Auslösen von untergeordneten Komponenten durch Klicken auf Schaltflächen in übergeordneten Komponenten in Vue
Klicken Sie auf die Vue-Schaltfläche, um Komponentenfunktionen dynamisch zu erstellen und zu löschen.
Vue implementiert die benutzerdefinierte Komponentenfunktion zum Anzeigen und Ausblenden von Kennwörtern
Das Ereignis der Schaltfläche zur Validierung des Vue-Formulars wird durch die übergeordnete Komponente ausgelöst
Klicken Sie auf die Schaltfläche Vue, um die dynamische Montage von Unterkomponenten zu realisieren
Produktion von Vue-Ripple-Button-Komponenten
Vue entwickelt einen Beispielcode einer Schaltflächenkomponente
Ändern Sie den Statusinstanzcode des Eingabefelds, nachdem Sie auf die Schaltfläche in der Vue-Komponente geklickt haben

<<: Unterschied zwischen MySQL Btree-Index und Hash-Index

>>: Führen Sie die Schritte aus, um den Fehler 403 Forbidden in Nginx zu beheben.