vue+iview 实现项目中一件切换主题

<Button @click="changetheme(0,$event)" type="primary">主题</Button>
<Button @click="changetheme(1,$event)" type="primary">主题</Button>
<Button @click="changetheme(2,$event)" type="primary">主题</Button>

const colorList = ['default','red','green']; //全局变量
Window.themeColor=colorList[0];       //写入Window对象

changetheme(colortype,e){e.stopPropagation();localStorage.setItem('themeColor',colortype);    //保存使用主题色document.body.classList.remove(window.cssStyle); //去除已有主题色window.cssStyle=colorList[Number(colortype)];    //获取新的主题色document.body.classList.add(window.cssStyle);    //body添加主题色的classlet themeColor = localStorage.getItem('themeColor'); // 判断是否已存在使用的皮肤if (themeColor) {window.cssStyle=colorList[Number(themeColor)];}else {localStorage.setItem('themeColor','0');  // 不存在则储存一个默认的主题色}document.body.classList.add(window.cssStyle);  //body 添加less中主题色的class
},

引入资源

<style lang="less" scoped>@import '../theme.less';<style>

主题文件

//theme.less 文件@theme-color : #226CDC; //默认主题色
@red-theme-color:#fe2419;
@green-theme-color:green;
.header-style(@theme-color:@red-theme-color){  // less函数button {background: @theme-color;}
}
//调用函数生成相应的样式
.header-style();  // 默认主题色.red{   // 这里需要单独添加一个class 用来换肤                           .header-style(@red-theme-color); // 红色button.ivu-btn-primary{background: @theme-color;}}.green{.header-style(@green-theme-color); //绿色button.ivu-btn-primary{background: @green-theme-color;}}