How to implement simple skin changing function using vue + less

Below I will share with you an example of using vue less to implement a simple skin change function. It has a good reference value and I hope it will be helpful to everyone. The skin change effect done by

is relatively simple, just changing the background color of the top navigation. The following is the rendering.

First of all, let me talk about my initial thoughts.

My initial idea was to use less to define variables, and then switch the variables through js, and achieve the skin-changing effect through the switched variables.

I first created a new theme.less file, the code is as follows:

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

As my original idea, the variable @theme should be changed through the click event value.

I used the element-ui framework, so the code for my drop-down menu is not complicated:

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

The callback event of the click event is bound to the command event, I defined a changeColor method

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

So, the question arises, how do I change the value of @theme through a click event? I fell into deep (searching) thinking (thinking)...

Finally I found a roundabout way to solve the problem. In fact, there was nothing wrong with the original idea, but it needed to be repackaged. How to package it? Although we cannot control the variable value for the time being, we can control the class name of the element.

We can extract the skinned part and use the less function to represent it, and change the theme.less code to the following code

where @backcolor is the background color and @fcolor is the font 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;
 }
 }
}

Create a new color.less and set several different skin styles. The different skin styles here are represented by themea, themeb, themec..., which correspond to the command value in the component. When I click on the pink color, the corresponding function is called to add the corresponding class name to the element. Don’t forget to quote theme.less

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

When you click on the skinned drop-down menu, the changeColor method called needs to add a different class name to the element. Of course, remember to quote the color.less file.

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

When working on this piece, I also encountered a problem at the beginning, that is, I only extracted the style of this page separately at the beginning, so the head styles of other components did not change. My first thought was to use cookies. Well, then I thought that since it is a single page, is it okay for me to bind the style to a top-level element?

The result is obvious! ! !

If you want to remember the last skin change, I use localStorage to record the theme of each click to change the skin, and then determine whether there is such a theme before rendering the page. The effect is as follows

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About the problem of extracting project-related configuration files when vue-cli is packaged (detailed tutorial)

Problems with routing permission management using Vue (detailed tutorial)

About the method of inserting variable parameters in vue.js tag attributes (detailed tutorial)

The above is the detailed content of How to implement simple skin changing function using vue + less. For more information, please follow other related articles on the PHP Chinese website!