Comment implémenter une fonction simple de changement de peau en utilisant vue + less

Ci-dessous, je vais partager avec vous un exemple d'utilisation de vue + less pour implémenter une simple fonction de changement de skin. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. L'effet de changement de peau effectué par

est relativement simple, il suffit de changer la couleur d'arrière-plan de la navigation supérieure. Ce qui suit est le rendu.

Tout d'abord, permettez-moi de parler de mes premières réflexions.

Mon idée initiale était d'utiliser moins pour définir des variables, puis de changer les variables via js, et d'obtenir l'effet de changement de peau grâce aux variables commutées.

J'ai d'abord créé un nouveau fichier theme.less avec le code suivant :

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

Comme mon idée originale, la variable doit être modifiée via l'événement click@ La valeur du thème.

J'ai utilisé le framework element-ui, donc le code de mon menu déroulant n'est pas compliqué :

<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>

L'événement de rappel de l'événement click est lié à l'événement de commande, j'ai défini une méthode changeColor

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

Donc, la question est, comment puis-je changer la valeur de @theme via l'événement click ? Je suis tombé dans de profondes réflexions (en recherche)...

Finalement, j'ai trouvé un moyen détourné de résoudre le problème. En fait, l'idée du début était bonne, mais elle avait besoin d'être reconditionnée. Comment le conditionner ? Bien que nous ne puissions pas contrôler la valeur de la variable pour le moment, nous pouvons contrôler le nom de classe de l'élément.

Nous pouvons extraire la partie skinning et utiliser la fonction less pour la représenter, et changer le code theme.less par le code suivant

où @backcolor est la couleur d'arrière-plan et @ fcolor est la police 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;
 }
 }
}

Créez un nouveau color.less et définissez plusieurs styles de skin différents. Les différents styles de skin sont ici représentés par themea, themeb, themec..., qui correspondent à la valeur de la commande dans le composant. Lorsque je clique sur la couleur rose, la fonction correspondante est appelée pour ajouter le nom de classe correspondant à l'élément. N'oubliez pas de citer theme.less

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

Lorsque vous cliquez sur le menu déroulant skinné, la méthode changeColor appelée doit ajouter un nom de classe différent à l'élément. Bien sûr, n'oubliez pas de citer le. fichier color.less.

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

En travaillant dessus, j'ai également rencontré un problème au début, c'est-à-dire que je n'ai extrait que le style de cette page séparément, donc les styles d'en-tête des autres composants n'ont pas changé. Ma première pensée a été d'utiliser des cookies. Ensuite, j'ai pensé que puisqu'il s'agit d'une seule page, puis-je lier le style à un élément de niveau supérieur ?

Le résultat est évident ! ! !

Si je veux me souvenir du dernier changement de skin, j'utilise localStorage pour enregistrer le thème de chaque changement de skin, puis déterminer s'il existe un tel thème avant de restituer la page. L'effet est le suivant

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

À propos du problème d'extraction des fichiers de configuration liés au projet lorsque vue-cli est packagé (tutoriel détaillé)

Problèmes de gestion des autorisations de routage à l'aide de Vue (tutoriel détaillé)

À propos de la méthode d'insertion de paramètres variables dans les attributs de balise vue.js (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!