vue+iview+less 实现换肤功能

 @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));
  }

 <Dropdown>
    <a href="javascript:void(0)" rel="external nofollow" >
      下拉菜单
      <Icon type="arrow-down-b"></Icon>
    </a>
    <DropdownMenu slot="list">
      <DropdownItem @click.native="changeColor(1)">摇滚主题</DropdownItem>
      <DropdownItem @click.native="changeColor(2)">新时代主题</DropdownItem>
      <DropdownItem @click.native="changeColor(3)">基础主题</DropdownItem>
    </DropdownMenu>
  </Dropdown>
   //更换主题
   changeColor(num){
    //把className theme1，theme2，theme3挂载在app.vue的<div id="app"></div>上
    document.getElementById('app').className ='theme'+num ;
    this.localStorageDate()
   },
   //存储localStoarge，用于进入系统时，记住用户上一次的选择，自动加载用户上一次选择的主题主题，记得在mounted()里面调用
   localStorageDate(){
    localStorage.setItem('app',document.getElementById('app').className)
   }