Wie ändere ich die Haut in Vue?

Dieser Artikel stellt hauptsächlich die Beispielpraxis der Vue-Hautveränderung vor. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Kürzlich erhielt ein von dem Unternehmen durchgeführtes Projekt eine Anfrage für ein Website-Skin-Reskin, also einen Themenwechsel. Wie kann man also die Designfarbe ändern? Das Ändern der Designfarbe ist eigentlich ein CSS-Wechsel. Im Projekt muss jedoch nicht nur CSS geändert werden, sondern auch Symbole und Bilder müssen entsprechend dem Design geändert werden. Deshalb habe ich einen Artikel geschrieben, um den Skinning-Prozess in Vue aufzuzeichnen. Schauen wir uns zunächst den Effekt an.

Dieser Artikel ist hauptsächlich in drei Teile unterteilt: CSS-Umschaltung, Symbolumschaltung und Bildumschaltung.

CSS-Umschaltung

Bezüglich der CSS-Farbumschaltung habe ich nach der ElementUI-Lösung gesucht und darauf verwiesen. Im Allgemeinen ist sie in vier Schritte unterteilt

Erstellen Erstellen Sie eine neue theme.css-Datei im statischen Verzeichnis und deklarieren Sie das CSS, das in dieser Datei ersetzt werden muss.

.side-bar {
 background: linear-gradient(#B7A3FF, #879FFF) !important;
}

.side-bar .account-info {
 background: #8981D8 !important;
}

deklariert alle optionalen Themes zur einfachen Unterscheidung

colors: [{
 themeId: 1,
 familyPrimary: '#B7A3FF',
 familySecondary: '#879FFF',
 sideBarTop: '#8981D8'
}, {
 themeId: 2,
 familyPrimary: '#FDC5C5',
 familySecondary: '#F070A0',
 sideBarTop: '#E7829F'
}, {
 themeId: 3,
 familyPrimary: '#414D6C',
 familySecondary: '#2D1E3C',
 sideBarTop: '#423C50'
}]

Rufen Sie theme.css über AJAX ab und ersetzen Sie den Farbwert durch Schlüsselwörter.

 getFile(`/static/theme.css`)
  .then(({data}) => {
   let style = getStyleTemplate(data)
  })

function getStyleTemplate (data) {
 const colorMap = {
  '#B7A3FF': 'familyPrimary',
  '#879FFF': 'familySecondary',
  '#8981D8': 'sideBarTop'
 }
 Object.keys(colorMap).forEach(key => {
  const value = colorMap[key]
  data = data.replace(new RegExp(key, 'ig'), value)
 })
 return data
}

Ersetzen Sie die Schlüsselwörter wieder durch die entsprechenden gerade generierten Farbwerte und fügen Sie das Style-Tag auf der Seite hinzu

 getFile(`/static/theme.css`)
  .then(({data}) => {
   let style = getStyleTemplate(data)
   writeNewStyle(style, this.color)
  })

function writeNewStyle (originalStyle, colors) {
 let oldEl = document.getElementById('temp-style')
 let cssText = originalStyle
 Object.keys(colors).forEach(key => {
  cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
 })
 const style = document.createElement('style')
 style.innerText = cssText
 style.id = 'temp-style'
 oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style)
}

Icon-Schalter

Da zu Beginn des Projekts die Notwendigkeit einer Skin-Änderung nicht berücksichtigt wurde, wurden alle Symbole mit img-Tags referenziert. Dies machte es unmöglich, die Farben für Symbole dynamisch zu ändern, also habe ich mich für „Ändern“ entschieden Schriftartdatei zur Verwendung von Symbolen. Hier ist eine empfohlene Website, icomoon, die Bilder problemlos in Schriftartdateien konvertieren kann. Symbole eignen sich auch sehr gut für die Verwendung durch Schriftarten. Wir können die Größe und Farbe des Symbols bequemer ändern.

Durch Online-Konvertierung fügen wir die heruntergeladene Schriftartdatei in das Projekt ein und erstellen eine neue CSS-Datei, um alle Symbole zu deklarieren.

 <img src="../../assets/icon_edit.svg">

Dann können Sie das Symbol über den CSS-Klassennamen referenzieren.

@font-face {
 font-family: 'icomoon';
 src: url('../assets/fonts/icomoon.eot?vpkwno');
 src: url('../assets/fonts/icomoon.eot?vpkwno#iefix') format('embedded-opentype'),
 url('../assets/fonts/icomoon.ttf?vpkwno') format('truetype'),
 url('../assets/fonts/icomoon.woff?vpkwno') format('woff'),
 url('../assets/fonts/icomoon.svg?vpkwno#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 vertical-align: sub;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
 content: "\e900";
}

Um das Theme effektiv zu machen, müssen wir auch das CSS des Symbols in die theme.css-Datei schreiben

 <span class="icon-edit"></span>

Bildwechsel

Es gibt auch viele Platzhalterbilder oder andere Bilder, die sich je nach Thema ändern. Durch Einführung aller Bilder und Verwendung von Dateinamen zur Unterscheidung von Bildern, die verschiedenen Themen entsprechen. Wenn Sie auf klicken, um das Thema zu wechseln, wechseln Sie zu der Datei, die dem Thema entspricht, und Sie können das Bild wechseln. Dazu habe ich ein Mixin geschrieben und das Mixin in die Komponente eingefügt.

.icon_edit:before {
 background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%);
}

placeholderMixin

<img :src="userImg || placeholderWoman">

Wenn Sie klicken, um das Thema zu wechseln, wird ein changeTheme-Ereignis ausgegeben. Wenn jede Komponente das changeTheme-Ereignis empfängt, weist sie den Wert des Bildes neu zu und erreicht so das Wirkung des Bildwechsels.

let callback
const placeholderMixin = {
 data () {
  return {
   placeholderWoman: '',
   placeHolderNoReply: '',
   placeHolderNothing: ''
  }
 },
 created () {
  let themeId = localStorage.getItem('themeId')
  let theme = themeId2Name(themeId)
  this.setThemeValue(theme)
  callback = (theme) => {
   this.setThemeValue(theme)
  }
  bus.$on('changeTheme', callback)
 },
 destroyed () {
  bus.$off('changeTheme', callback)
 },
 methods: {
  setThemeValue (theme) {
   this.placeholderWoman = require(`@/assets/placeholder_woman_${theme}.svg`)
   this.placeHolderNoReply = require(`@/assets/icon_noreply_${theme}.svg`)
   this.placeHolderNothing = require(`@/assets/icon_nothing_${theme}.svg`)
  }
 }
}

Dadurch wird auch der Effekt eines Themenwechsels erzielt, diese Methode erfordert jedoch die Einführung von Mixins in fast allen Geschäftskomponenten. Wenn es eine bessere Methode gibt, können Sie sich gerne an mich wenden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den Prozentsatz der Tabellenunterstützungshöhe im Bootstrap

So implementieren Sie untergeordnete Geschwisterkomponenten in Vue2.0-Daten Interaktion zwischen

So implementieren Sie benutzerdefinierte globale Methoden in Vue

Das obige ist der detaillierte Inhalt vonWie ändere ich die Haut in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!