How vue, iview and less implement the skin-changing function (with code)

The content of this article is about how vue, iview and less implement the skin-changing function (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

vue-cli for project construction, iview for css framework selection
1. First install less support

npm install --save-dev less-loader less

and then go to the webpack.base.conf.js file in the build folder , add support for .less

2. The preparations are done, start changing the skin

2.1 Create a new file Fold styles and create a new file theme.less in it
Define a .theme() method and write the required color parameters as shown:

2.2 Create a new color.less file under the styles folder to store various themes. Define various themes according to your own needs. Remember to introduce the theme.less file

    @import url('./theme.less');
    .theme1{
        .theme();//默认的样式
    }
    .theme2{
        .theme(rgb(141, 139, 219),#fff,#eee,rgb(130, 126, 240));
    }
    .theme3{
        .theme(rgb(172, 214, 200),#615f5f,#fff,rgb(91, 139, 123));
    }

2.3 Introduce it in main.js color.less file

     import './styles/color.less'

2.4 In the .vue file for theme selection, perform the following operations

     <dropdown>
        <a>
            下拉菜单
            <icon></icon>
        </a>
        <dropdownmenu>
            <dropdownitem>摇滚主题</dropdownitem>
            <dropdownitem>新时代主题</dropdownitem>
            <dropdownitem>基础主题</dropdownitem>
        </dropdownmenu>
    </dropdown>
    
     //更换主题
      changeColor(num){
        //把className theme1，theme2，theme3挂载在app.vue的<p></p>上
        document.getElementById('app').className ='theme'+num ;
        this.localStorageDate()
      },
     //存储localStoarge，用于进入系统时，记住用户上一次的选择，自动加载用户上一次选择的主题主题，记得在mounted()里面调用
      localStorageDate(){
        localStorage.setItem('app',document.getElementById('app').className)
      }

Related recommendations:

What is fabricjs? Fabricjs front-end drawing library usage arrangement (with code)

What is the use of this in js? Usage of this keyword in js (with code)

The above is the detailed content of How vue, iview and less implement the skin-changing function (with code). For more information, please follow other related articles on the PHP Chinese website!