So implementieren Sie eine einfache Skin-Change-Funktion mit Vue + Less

Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von Vue + Less zur Implementierung einer einfachen Skin-Änderungsfunktion vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Der von

durchgeführte Skin-Änderungseffekt ist relativ einfach, indem einfach die Hintergrundfarbe der oberen Navigation geändert wird. Das Folgende ist das Rendering.

Lassen Sie mich zunächst über meine ersten Gedanken sprechen.

Meine ursprüngliche Idee bestand darin, weniger zum Definieren von Variablen zu verwenden, die Variablen dann über js zu wechseln und den hautverändernden Effekt durch die geschalteten Variablen zu erzielen.

Ich habe zunächst eine neue theme.less-Datei mit folgendem Code erstellt:

 @theme:@themea;
 @themea:pink;
 @themeb:blue;
 @themec:gray;

Wie ich ursprünglich dachte, sollte die Variable @theme durch das Click-Event geändert werden. Wert.

Ich habe das Element-UI-Framework verwendet, daher ist der Code für mein Dropdown-Menü nicht kompliziert:

<el-dropdown class="colorBtn " trigger="click" @command="changeColor">
 <span class="el-dropdown-link " >换肤</span>
 <el-dropdown-menu slot="dropdown">
 <el-dropdown-item command="a" @click="change_type(a)">梦幻粉</el-dropdown-item>
 <el-dropdown-item command="b" @click="change_type(b)">天空蓝</el-dropdown-item>
 <el-dropdown-item command="c" @click="change_type(c)">雾霾灰</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

Das Rückrufereignis des Klickereignisses ist gebunden an Für das Befehlsereignis habe ich eine changeColor-Methode

  changeColor(command){
  console.log(command);//能获取到当前点击的元素的command
 }

definiert. Es stellt sich also die Frage: Wie ändere ich den Wert von @theme durch ein Klickereignis? Ich verfiel in tiefe Gedanken (Denken) ...

Endlich fand ich einen Umweg, um das Problem zu lösen. Eigentlich war die Idee am Anfang in Ordnung, aber sie musste neu verpackt werden. Wie verpacke ich es? Obwohl wir den Variablenwert vorerst nicht steuern können, können wir den Klassennamen des Elements steuern.

Wir können den Skinning-Teil extrahieren und die Funktion less verwenden, um ihn darzustellen, und den theme.less-Code in den folgenden Code ändern

wobei @backcolor die Hintergrundfarbe und @ ist fcolor ist die Schriftart Color

.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
 .header {
 color: @fcolor;
 background: @backcolor;
 width: 100%;
 height: 2rem;
 position: relative;

 h4 {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
 }
 .go-back {
  width: 2rem;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  float: left;
  line-height: 2rem;
  margin-left: 1rem;
  position: absolute;
  left: 0;
  top: 0;
 }
 .header-cont {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
  color: #fff;
 }
 .colorBtn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  line-height: 2rem;
  margin-right: 1rem;
  position: absolute;
  top: 0;
  right: 0;
 }
 }
}

Erstellen Sie eine neue Farbe.less und legen Sie verschiedene Skin-Stile fest. Die verschiedenen Skin-Stile werden hier durch themea, themeb, themec ... dargestellt, die dem Befehlswert in der Komponente entsprechen. Wenn ich auf die rosa Farbe klicke, wird die entsprechende Funktion aufgerufen, um dem Element den entsprechenden Klassennamen hinzuzufügen. Vergessen Sie nicht, theme.less zu zitieren

 @import url('./theme.less');
  .themea{
   .theme();//默认的样式
  }
  .themeb{
   .theme(blue,#fff);
  }
  .themec{
   .theme(#111,#999);
  }

Wenn Sie auf das Dropdown-Menü mit der Skin klicken, muss die aufgerufene Methode „changeColor“ dem Element einen anderen Klassennamen hinzufügen. Denken Sie natürlich daran, die Farbe in Anführungszeichen zu setzen. weniger Datei.

 changeColor(command){
  console.log(command);
  document.getElementById('app').className ='theme'+command ;
 }

Bei der Arbeit an diesem Stück bin ich am Anfang auch auf ein Problem gestoßen, das heißt, ich habe den Stil dieser Seite am Anfang nur separat extrahiert, sodass sich die Kopfstile anderer Komponenten nicht geändert haben. Mein erster Gedanke war, Cookies zu verwenden. Dann dachte ich, dass es für mich in Ordnung ist, den Stil an ein Element der obersten Ebene zu binden, da es sich um eine einzelne Seite handelt.

Das Ergebnis kann sich sehen lassen! ! !

Wenn ich mich an die letzte Skin-Änderung erinnern möchte, verwende ich localStorage, um das Thema jeder Skin-Änderung aufzuzeichnen und dann festzustellen, ob es ein solches Thema gibt, bevor ich die Seite rendere. Der Effekt ist wie folgt

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über das Problem des Extrahierens projektbezogener Konfigurationsdateien beim Packen von vue-cli (ausführliches Tutorial)

Probleme bei der Routing-Berechtigungsverwaltung mit Vue (ausführliches Tutorial)

Über die Methode zum Einfügen variabler Parameter in vue.js-Tag-Attribute (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Skin-Change-Funktion mit Vue + Less. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!