Skin-Change-Lösung basierend auf Vue kombiniert mit ElementUI

Vorne geschrieben

Die Funktion zum Ändern des Skins ist nicht sehr verbreitet, wird aber dennoch nachgefragt. Daher finden Sie hier einige Front-End-Lösungen zum Ändern des Skins zu Ihrer Information.

In diesem Artikel werden verschiedene Skinning-Lösungen auf Basis von Vue und Element-UI vorgestellt. Dabei wird Wert darauf gelegt, dass er leicht zu verstehen und zu verwenden ist. Ich hoffe, er gefällt euch~

Lösung 1: Globale Stilüberschreibung verwenden (universell für das Front-End)

Dies dürfte die gebräuchlichste, am leichtesten zu erdenkende und am einfachsten umzusetzende Lösung sein.

Wir schreiben ein separates Stylesheet (CSS-Datei Deep Space Blue.css), beginnend mit einem bestimmten Namen (z. B. .blue-theme), und vervollständigen dann in dieser CSS-Datei den Stylecode unseres zweiten Skins. Wenn wir dann auf die Skin-Änderung klicken, fügen wir dem Body-Tag die Klasse Blue-Theme hinzu, und zu diesem Zeitpunkt wird unser Skin-Änderungseffekt angezeigt.

Wenn wir hier auf Space Blue klicken, wird dem Body die Klasse Science-Blue hinzugefügt, und wenn wir auf Bronze Green klicken, wird Science-Blue entfernt, da unser Standard Bronze Green ist.

Lösung 2: Passen Sie Ihr eigenes Element-UI-Farbschema an

Das Standardfarbschema für Elemente ist:

Element-UI bietet auch ein benutzerdefiniertes Farbanpassungstool und eine Konfigurationsseite. Über dieses Tool oder diese Seite können wir die oben genannten fünf Hauptfarben und Hilfsfarben anpassen.

Wenn es sich um ein Tool handelt, generieren Sie es nach der Konfiguration; wenn es sich um eine Webseite handelt, laden Sie es herunter. Holen Sie sich eine Stildatei, nämlich die von uns konfigurierte Design-Stildatei.

Behalten Sie die Beziehung zwischen der CSS-Datei und dem Schriftartenverzeichnis unverändert bei (PS: das ist sehr wichtig) und fügen Sie sie in unser Projekt ein. (Sie können den Namen dieser CSS-Datei beliebig ändern. Ich habe ihn beispielsweise in theme-summer.css geändert.)

Kommentieren Sie dann in main.js unseres Projekts den ursprünglichen CSS-Dateiimport von Element-UI aus und importieren Sie die CSS-Datei, die wir gerade in das Projekt eingefügt haben.

Zu diesem Zeitpunkt wird die Farbe der Element-UI im Projekt zum Farbschema, das wir gerade angepasst haben. (Unten sehen Sie eine Reihe von Farben, die ich angepasst habe. Was meinen Sie?)

Ist Ihnen jedoch aufgefallen, dass dadurch nur die Standardfarbe von Element-UI in unserem Projekt auf die gewünschte Farbe geändert wird? Wir möchten jedoch das Skin ändern und hoffen, dass die Farbe geändert werden kann.

Daher verwenden wir immer noch die obige Methode, um jedem CSS-Stil in der generierten CSS-Datei ein eindeutiges Namenspräfix hinzuzufügen, und fügen diese Klasse dann beim Ändern des Skins dem Textkörper hinzu. Auf diese Weise können wir auch eine umfangreiche Skin-Änderungsfunktion erreichen (da wir viele Sätze schöner Farbschemata selbst anpassen können).

Nun muss das Problem gelöst werden: Wie füge ich dieser CSS-Datei einen Namespace hinzu?

Werfen wir einen Blick auf die CSS-Datei, die von diesem Tool generiert oder von der Konfigurationsseite exportiert wurde. Es ist unrealistisch, manuell eine Klasse um jeden Stil zu wickeln, um einen Namespace zu erstellen. Daher müssen wir das Gulp-Plugin gulp-css-wrap verwenden, um dieses Ergebnis zu erzielen.

Erste:

npm ich schlucke schluck-clean-css schluck-css-wrap -D

Schreiben Sie dann gulpfile.js

// gulpfile.js

var Pfad = erforderlich('Pfad')
var gulp = erfordern('gulp')
var cleanCSS = erforderlich('gulp-clean-css')
var cssWrap = erforderlich('gulp-css-wrap')

var benutzerdefiniertesThemeName = ".theme-summer"

gulp.task('Standard', Funktion() {
  returniere gulp.src(Pfad.auflösen('./index.css'))
    .pipe(cssWrap({selector: benutzerdefinierterThemename}))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'))
})

Führen Sie dann gulp aus

Dadurch erhalten Sie ein benutzerdefiniertes Design mit .theme-summer als Namespace.

Nach dem Hinzufügen können wir die Skin-Umschaltfunktion implementieren, indem wir der zuvor eingeführten Methode zum Wechseln der Klasse des Body-Elements folgen.

Lösung 3: Website-Farbe schnell ändern

Laut der offiziellen Website von Element ist Element in SCSS geschrieben. Wenn Ihr Projekt auch SCSS verwendet, können Sie die Stilvariablen von Element direkt im Projekt ändern. Erstellen Sie eine neue Datei im Stil „element-variables.scss“. (Erinnerung: Bitte stellen Sie sicher, dass Sie Node-Sass und Sass-Loader installiert haben)

Die Datei element-variables.scss wird hier nicht veröffentlicht. Sie können sie hier sehen: element-variables.scss. Diese Datei definiert viele Farbvariablen.

Diese Methode ist einfach zu verwenden. Sie müssen es nur importieren

Ändern Sie die Farbvariablen darin, damit die Änderungen wirksam werden.

Diese Methode ist schnell und kann durch die Änderung einiger Farbvariablen effektiv sein. (Dann können Sie es bereitstellen~)

Hier ist eine Frage: Wie ändere ich die Variablen in dieser Datei element-variables.scss in js? Wenn dies erreicht werden kann, ist eine dynamische Farbänderung in Echtzeit möglich.

Zusätzlicher Hinweis: Es gibt eine Lösung, um SCSS-Variablen mit JS zu ändern, aber es ist in unserem Projekt nicht möglich, Farben dynamisch zu ändern. Warum? Denn alle vorkompilierten CSS-Sprachen (Sass, Less, Stylus) in unserem Projekt werden letztendlich in CSS kompiliert, d. h., im gepackten Projekt gibt es nur kompilierte CSS-Dateien. Dann funktioniert Ihre Methode zum Ändern von SCSS-Variablen mit JS im gepackten Projekt nicht.

Lösung 4: Ändern Sie die Hauptfarbe in Echtzeit

Wir haben mehrere Methoden zum Ändern von Skins eingeführt, die sich jedoch alle innerhalb der begrenzten Auswahl an Skins befinden, die wir anbieten. Wir haben jedoch die Anforderung, dass ein Farbwähler angezeigt wird und die Hauptfarbe der Seite dann sofort in die von uns gewählte Farbe geändert wird.
Die offizielle ElementUI-Website hat dynamisches Skinning implementiert, mit dem Benutzer Farbwerte anpassen können und der Anzeigeeffekt eleganter wird. Schauen wir uns an, wie es umgesetzt wird (hier ist die offizielle Erklärung der Umsetzung)

• Holen Sie sich die Stildatei der aktuellen Version von Element-UI (Online-XHR-Erfassung).
• Erstellen Sie eine Reihe entsprechender Farben basierend auf der vom Benutzer ausgewählten Themenfarbe (wenn beispielsweise Grün ausgewählt ist, erstellen Sie unterschiedliche Hellgrün- und Dunkelgrüntöne usw.).
• Farbersetzung (ersetzt die Farbe in der Stildatei durch die gerade generierte Farbe)
• Fügen Sie ein Style-Tag direkt zur Seite hinzu und füllen Sie den generierten Style aus

Werfen wir einen Blick auf die technischen Implementierungsdetails. Ich empfehle Ihnen dringend, den Code zu öffnen und einen Blick darauf zu werfen: https://github.com/Neveryu/vue-cms/blob/master/src/views/theme/index.vue#L167-L297)

1. Zuerst müssen wir die Versionsnummer von element-ui über package.json abrufen und entsprechend der Versionsnummer den entsprechenden Stil anfordern.

// Wenn keine Kreide vorhanden ist, müssen Sie die Farbe zum ersten Mal ändern. Sie müssen die CSS-Datei remote abrufen und sie der Kreide zuweisen
// Nachfolgende Farbwechselvorgänge erfordern keine Remote-Erfassung, wenn (!this.chalk) {
    const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
    warte auf dies.getCSSString(URL, 'Kreide')
}

Die Methode getCSSString ist eine gängige XHR-Methode zum Abrufen von Remote-CSS-Ressourcendateien.

2. Generieren Sie die entsprechende Farbe entsprechend der vom Benutzer ausgewählten Farbe

/**
 * Übergeben Sie einen Farb-HEX und erhalten Sie die Farbpalette mit den Schattierungen dieser Farbe. * Wir wissen, dass unsere Standardhauptfarbe Blau ist, und bei der tatsächlichen Verwendung benötigen wir auch entsprechendes Hellblau und Dunkelblau. * @param {[string]]} theme [color]
 * @return {[array]} [das entsprechende Array aus hellen und dunklen Farben]
 */
getThemeCluster(Thema) {
    // Weitere Einzelheiten finden Sie im Code. Ich werde sie hier nicht aufschreiben // ...
}

3. Farbersatz

/* Stil aktualisieren – alte Farbvariablen durch neue ersetzen*/
updateStyle(Stil, alterCluster, neuerCluster) {
  let newStyle = Stil
  oldCluster.forEach((Farbe, Index) => {
    neuerStil = neuerStil.ersetzen(neuer RegExp(Farbe, 'ig'), neuerCluster[Index])
  })
  neuen Stil zurückgeben
}

4. Fügen Sie der Seite ein Style-Tag hinzu und füllen Sie den generierten Style aus

let styleTag = document.getElementById(id)
wenn (!styleTag) {
  styleTag = document.createElement('Stil')
  styleTag.setAttribute('id', id)
  document.head.appendChild(Stil-Tag)
}
styleTag.innerText = neuerStil

Wenn Sie die Farbe zum ersten Mal ändern, müssen Sie ein Stil-Tag erstellen und es dem Textkörper hinzufügen. Bei nachfolgenden Farbänderungen müssen Sie dies nicht mehr tun.

OK, sehen wir uns die Wirkung an:

Bildbeschreibung hier einfügen

【Online-Demo: vue-cms】
[Quellcode: github.com/Neveryu/vue-cms]

Dies ist das Ende dieses Artikels über die Skin-Change-Lösung basierend auf Vue kombiniert mit ElementUI. Weitere relevante Inhalte zu Vue kombiniert mit ElementUI Skin-Change-Inhalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!