Änderung des Vue-Elementui-Schaltflächenstils

Vue.js ist ein JavaScript-Framework zum Erstellen interaktiver Webanwendungen, während ElementUI ein UI-Framework ist, das auf Vue.js basiert.

Als eines der am häufigsten verwendeten Front-End-UI-Frameworks bietet ElementUI viele Komponenten, die für Entwickler praktisch sind. Die Schaltflächenkomponente ist das, was wir normalerweise verwenden, aber manchmal entspricht der Standardschaltflächenstil möglicherweise nicht den Anforderungen des Projekts oder Bedürfnisse Dies Manchmal müssen wir den Schaltflächenstil ändern. In diesem Artikel wird erläutert, wie Sie Stile zum Ändern von Schaltflächenstilen verwenden.

Der Stil der Schaltfläche in ElementUI kann auf folgende Weise geändert werden:

1. Nach Klassennamen ändern

Die Schaltflächenkomponente von ElementUI verfügt über mehrere Standardstilklassen, die Entwickler verwenden können, z. B. primär, Gefahr, Warnung, Info, Erfolg warten. Über diese Klassennamen können wir die Farbe und den Stil der Schaltfläche ändern.

<el-button type="primary">primary</el-button>
<el-button type="danger">danger</el-button>
<el-button type="warning">warning</el-button>
<el-button type="info">info</el-button>
<el-button type="success">success</el-button>

Der Typ hier ist der Stilklassenname der Schaltfläche.

Wir können den Stil auch ändern, indem wir den Klassennamen anpassen:

<el-button class="my-btn">Custom</el-button>

.my-btn{
  background-color: #409EFF;
  color: #fff;
}

2. Durch Inline-Stil ändern

Es ist auch eine praktikable Methode, den Schaltflächenstil durch Inline-Stil zu ändern. Fügen Sie einfach das Stilattribut zur Implementierung der Schaltflächenkomponente hinzu :

<el-button style="background-color: #409EFF; color: #fff;">Custom</el-button>

3. Durch Ändern des globalen Stils

Wenn Sie ihn auf alle Schaltflächen im gesamten Projekt anwenden müssen, können wir dies tun, indem wir den globalen Stil in ElementUI ändern. In Vue können wir den Stil von ElementUI ändern, indem wir eine neue .scss-Datei erstellen und diese in die Projekteintragsdatei einfügen.

Das Folgende ist ein Beispiel für die Änderung des Schaltflächenstils von ElementUI:

// 引入ElementUI的sass全局变量和mixin
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
@import "~element-ui/packages/theme-chalk/src/mixins/mixins.scss";

// 改写ElementUI的变量
$--color-primary: #409EFF;
$--border-radius-base: 4px;

// 自定义按钮样式
.el-button {
  &.my-btn {
    background-color: $--color-primary;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.45);
    color: #fff;
    &:hover {
      background-color: #66b1ff;
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.65);
    }
  }
}

Im obigen Beispiel haben wir die Designfarbe und die abgerundete Schaltflächengröße geändert, indem wir die globalen Variablen von ElementUI geändert haben, dann unseren eigenen Schaltflächenstil definiert und hinzugefügt Dynamische Effekte. Verwenden Sie einen benutzerdefinierten Klassennamen, um den ursprünglichen Stil von ElementUI zu überschreiben und den Stil der Schaltfläche zu ändern.

Zusammenfassung

Die oben genannten Möglichkeiten sind mehrere Möglichkeiten, den Stil der ElementUI-Schaltflächenkomponente zu ändern. Mit diesen Methoden können wir benutzerdefinierte Stile implementieren. Sie müssen lediglich die entsprechende Änderungsmethode entsprechend den spezifischen Anforderungen auswählen, um bessere Ergebnisse auf der Seite zu erzielen.

Das obige ist der detaillierte Inhalt vonÄnderung des Vue-Elementui-Schaltflächenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!