Vier Möglichkeiten zum Ändern des Standard-CSS-Stils von Element-UI-Komponenten in Vue

Vorwort

Das Ändern des Standardstils von Element-UI-Komponenten war schon immer ein langjähriges Thema. Nachdem ich ein ganzes Projekt im Unternehmen abgeschlossen hatte, fasste ich die folgenden 4 Methoden zum Ändern des Standardstils von Element-UI zusammen.

1. Verwenden Sie eine globale einheitliche Übersteuerung

Bei einigen allgemeinen Komponenten mit festen Stilen können diese global verarbeitet werden, indem eine neue CSS- oder SCSS-Datei erstellt wird, um die ursprüngliche Klasse des Elements zu überschreiben.

Sie können eine neue Datei „element-ui-reset.scss“ im Verzeichnis „src/styles“ erstellen und den ursprünglichen Klassennamen entsprechend den Anforderungen der Benutzeroberfläche ändern.

Der Vorteil der Verwendung von SCSS besteht darin, dass Sie Variablen verwenden können, um mit verschiedenen Änderungen in der Benutzeroberfläche umzugehen

Beispielsweise haben die Schaltflächen, Seiten, Kontrollkästchen und anderen Komponenten, die wir häufig verwenden, in der Benutzeroberfläche im Wesentlichen das gleiche Design, sodass ich diese Stile einheitlich ändern kann.

element-ui-reset.scss

$danger-btn-Farbe: #F25454;
$primary-btn-color:#3d66e4;
$Erfolg-btn-Farbe:#12A763;


//Ändern Sie die Standardfarbe der Schaltfläche.el-button--primary{
	Hintergrundfarbe: $primary-btn-color;
	Rahmenradius: 4px;
	//Rahmen: 1px durchgehend $primary-btn-color;
	Schriftgröße: 16px;
	Rand: 0;
	
}

//Ändern Sie die Farbe des Gefahren-Buttons.el-button--danger{
	Hintergrundfarbe: $danger-btn-color;
	Rahmenradius: 4px;
	//Rand: 1px durchgezogen $danger-btn-color;
	Schriftgröße: 16px;
	Rand: 0;
}

//Ändern Sie die Farbe des Erfolgs-Buttons.el-button--success{
	Hintergrundfarbe: $success-btn-color;
	Rahmenradius: 4px;
	//Rahmen: 1px durchgezogen $success-btn-color;
	Schriftgröße: 16px;
	Rand: 0;
	
}

//Standardfarbe der Schaltfläche ändern.el-button--default{
	Schriftgröße: 16px;
	Rahmenradius: 4px;
}


//Ändern Sie die Farbe des Erfolgs-Buttons.el-button--warning{
	//Hintergrundfarbe: $success-btn-color;
	Rahmenradius: 4px;
	//Rahmen: 1px durchgezogen $success-btn-color;
	Schriftgröße: 16px;
	Rand: 0;
	
}


//Ändern Sie die Seitenfarbe.el-pagination{
	Position: absolut;
	Anzeige: Inline-Block;
	Rand: 0 automatisch;
	links: 50 %;
	transformieren: übersetzenX(-50%);
	Hintergrundfarbe: #fafafa;
	Rand: durchgezogen 1px #dfe8eb;
	Polsterung: 0 !wichtig;
	.el-pager{
		Rand: 0 !wichtig;
		.Nummer{
			Farbe: #3d66e4 !wichtig;
			Rahmen links: 1px durchgezogen #dfe8eb;
			Rahmen rechts: 1px durchgezogen #dfe8eb;
			Hintergrundfarbe: #fafafa !wichtig;
			&.aktiv{
				Farbe: #fff !wichtig;
				//Rand: 1px durchgezogen #3d66e4;
				Hintergrundfarbe: #3d66e4 !wichtig;
				Rand: 1px durchgezogen #3d66e4 !wichtig;
			}
		}
		
	}
	
}	

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
	Rand: 0 !wichtig;
	Hintergrundfarbe: #fafafa !wichtig;
}


//Ändern Sie das Kontrollkästchen
.el-checkbox__inner{
	  Rand: 1px durchgezogen #C0C0C0;
	  Breite: 16px;
	  Höhe: 16px;
	  Randradius: 0;
}

Importieren Sie es dann in Ihre main.js

importiere './src/styles/element-ui-reset.scss' 

Also

Vorteil

• Globale Abdeckung, ersparen Sie sich Ärger
• Die Verwendung von SCSS ist flexibler
• Stilüberschreibungen können jederzeit entfernt werden

Mangel

• Lokale Änderungen erfordern eine Neubespannung
• Alle geänderten Komponentenstile sind gleich

2. Ändern Sie die .vue-Datei

Mit dieser Methode können Sie der Vue-Datei ein Style-Tag hinzufügen.

Wird verwendet, um bestimmte Komponentenstile zu ändern, wird aber nicht global angewendet.

Beispielsweise benötigt eine VUE-Datei eine speziell angepasste Tabellenkomponente, während andere Dateien den ursprünglichen Stil verwenden müssen.

Auf diese Weise können wir das Problem am besten lösen, indem wir der .vue-Datei ein Style-Tag hinzufügen.

Ändern Sie hier den Standardstil der Tabelle

<Vorlage>
	<div Klasse="meine-Klasse">
            <el-Tabelle>
            </el-Tabelle>
        </div>
</Vorlage>

<Skript>
</Skript>

<style scoped="scoped" lang="scss">
</Stil>

<Stil>
	
    /* Ändern Sie den Stil der Tabellenkomponente in der Element-Benutzeroberfläche*/

    .meine-Klasse__expand-Spalte .Zelle {
            Anzeige: keine;
    }

    .meine-Klasse .el-table tbody tr:hover>td {
            Cursor: Zeiger;
    }


    .meine-Klasse .el-form .el-form-item .el-input__inner:Fokus{
             Rand: 1px durchgezogen #3D66E4;
       }

   
</Stil>

Beachten Sie jedoch, dass Sie den einzigen Gültigkeitsbereich hinzufügen müssen, also den äußersten Klassennamen, wie oben „my-class“. Es beschränkt den geänderten Stil der aktuellen Tabelle so, dass er nur in dieser Klasse und ihren untergeordneten Elementen wirksam ist.

Andernfalls wird der Tabellenstil weiterhin global überschrieben

Wenn Sie möchten, können Sie natürlich „Klasse“ durch „ID“ ersetzen. Dadurch wird sichergestellt, dass es zu keinen Konflikten hinsichtlich des Klassennamens kommt.

<Vorlage>
	<div id="meine-Klasse">
            <el-Tabelle>
            </el-Tabelle>
        </div>
</Vorlage>

<Stil>
	
    /* Ändern Sie den Stil der Tabellenkomponente in der Element-Benutzeroberfläche*/

    #meine-Klasse__Spalte-erweitern .cell {
            Anzeige: keine;
    }

    #meine-klasse .el-table tbody tr:hover>td {
            Cursor: Zeiger;
    }


    #meine-klasse .el-form .el-form-item .el-input__inner:fokus{
             Rand: 1px durchgezogen #3D66E4;
       }

  
</Stil>

Der Vorteil dieses Ansatzes besteht darin, dass Sie bestimmte Klassen dynamisch binden können

 <Vorlage>
	<div id="meine-Klasse">
            <el-table :class="meine-tabelle">
            </el-Tabelle>
        </div>
</Vorlage>

<Stil>
	
    /* Ändern Sie den Stil der Tabellenkomponente in der Element-Benutzeroberfläche*/

    #meine-Klasse__Spalte-erweitern .cell {
            Anzeige: keine;
    }

    #meine-klasse .el-table tbody tr:hover>td {
            Cursor: Zeiger;
    }


    #meine-klasse .el-form .el-form-item .el-input__inner:fokus{
             Rand: 1px durchgezogen #3D66E4;
       }

    #meine-Klasse .meine-Tabelle {
    
    }

</Stil>

Vorteil

• Flexible Anpassung, dynamische Bindung
• Keine globalen Änderungen

Mangel

• Sie müssen einen eindeutigen Klassenbereich angeben

3. Ändern Sie den Stil der Komponente

Ich empfehle diese Methode nicht wirklich. Abgesehen davon, dass sie redundant ist, kann ich nicht garantieren, dass sie funktioniert (dies hängt von der Unterstützung des Element-UI-Quellcodes ab).

Für einige Komponenten, die selten verwendet werden, aber Eigenschaften dynamisch binden müssen, können Sie es jedoch verwenden

Beispielsweise muss ich für diese <el-backtop>-Komponente möglicherweise einige dynamische Stilattribute daran binden

So können Sie Stil daran binden

	<el-backtop Ziel="" :bottom="100" >
	  <div :Stil="{
             Höhe: 100%;
             Breite: _Breite;
             Hintergrundfarbe: #f2f5f6;
             Kastenschatten: 0 0 6px rgba(0,0,0, .12);
             Textausrichtung: zentriert;
             Zeilenhöhe: 40px;
             Farbe: #1989fa;
             Randradius: 50 %;
           }">

                        <i class="el-icon-caret-top"></i>
                </div>
        </el-backtop>
        
        
        Daten() {
           
         zurückkehren {
           _Breite: 50 %
         }
        }
        
        

Vorteil

• Flexibel und komfortabel
• Dynamische Bindung

Mangel

• Redundanz
• Hohe Kopplung

4. Weitere Informationen finden Sie in der offiziellen API-Dokumentation von Element-UI

Einige offizielle Komponenten-Websites bieten APIs zum Ändern von Stilen

Sie können den Stil der Komponente entsprechend der API festlegen

Vorteil

• offiziell

Mangel

• Weniger unterstützende Komponenten

zweifeln

Warum ein neues Style-Tag hinzufügen?

Denn im tatsächlichen Gebrauch habe ich festgestellt, dass einige mit Gültigkeitsbereichsattributen geschriebene Klassen keine Auswirkungen auf Element-UI-Komponenten haben

Dies führte dazu, dass einige geänderte Stile verwendbar waren und andere nicht, also habe ich einfach den Stil-Tag neu geschrieben

Warum nicht das Attribut !important verwenden?

Dieser Typ ist zu anmaßend und übt mehr Zwang aus als globale Änderungen. Außerdem ist es schwer zu schreiben.

Warum nicht ::v-tiefe Penetration verwenden

Erstens, abgesehen von der ekelhaften Art zu schreiben, ist die Kopplung zu hoch

Wenn Sie keine Stilüberschreibung benötigen, müssen Sie nur das neue Stil-Tag löschen

Wenn Sie ::v-deep verwenden, wer kann es ertragen, es zeilenweise zu ändern?

Zusammenfassen

Bei der oben beschriebenen Methode handelt es sich nicht um eine offizielle Methode, sondern um eine Methode, die ich zusammengefasst habe, nachdem ich bei meiner täglichen Entwicklung auf Schwierigkeiten gestoßen bin.

Obwohl es nicht perfekt ist, löst es mein Problem weitgehend.

Dies ist das Ende dieses Artikels über die standardmäßige CSS-Stiländerung von Element-UI-Komponenten in Vue. Weitere relevante Inhalte zur standardmäßigen CSS-Stiländerung von Vue-Element-UI-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!