iview 实现在theme主题中添加某一个新模块的主题颜色切换

背景:直接下载的iview-admin 1.3.1模板

1、iview 自带主题theme 主要有4个颜色组成 分别为 默认的蓝色,其他分别为红色,蓝色,洋红色;然后在根据菜单栏是否为黑色和白色的组合状态所以有8中组合的主题;
2、默认的蓝色的css为node-modules iview/dist/styles/iview.css 需要有新模块的颜色变化可以通过在源码css中重新定义写css颜色样式,最好用ivu作为前缀并且要注意不要和之前的class重复
3、然后分别在src/views/main-components/theme-switch/theme/g.css 和r.css和y.css 这三个css添加之前需要定义的class相对应的颜色值 这样就可以了;

iview-admin 是在选择主题颜色的时候先将菜单背景色黑色和白色作为参数存储到store ----app.js当中 changeMenuTheme
iview 实现在theme主题中添加某一个新模块的主题颜色切换_第1张图片
然后根据选择的主题调用不同的css,根据是否是生产或者开发环境实现设置不同的href路径调用不同的css

iview 实现在theme主题中添加某一个新模块的主题颜色切换_第2张图片

通过js获取查找到link 同时给them设置一个name独立出来以便查找赋值
iview 实现在theme主题中添加某一个新模块的主题颜色切换_第3张图片

但这样实际是改源代码,感觉适用性不是太强

你可能感兴趣的:(iview)