需求：网站换肤，主题切换。网站的主题色可以在几种常用颜色之间进行切换，还有相关图片、图标也要跟随主题进行切换。
不多说，先看下最终的实现效果：
文章由两部分组成：css切换，图片图标切换
css切换
1.在 static 目录下新建一个 styles 文件夹，在 styles 下新建一个 theme.scss 文件（项目使用了sass，会自动编译成css文件，如果没有使用这些预处理工具可以直接新建 theme.css），将需要替换的 css 声明在此文件中。
我要评论
.theme-test-btn {
background-color: #409eff;
border-color: #409eff;
}
.theme-test-btn:hover,
.theme-test-btn:focus {
background-color: #66b1ff;
border-color: #66b1ff;
}
2.在 src/assets/js/const/ 目录下新建 theme-colors.js，用于声明所有可选的主题，每种颜色都对应一个关键词，方便区分
const colors = [
{
themeid: 0,
primarybtn: '#409eff', // 主要按钮的背景色
pribtnhover: '#66b1ff', // 主要按钮的悬浮、聚焦背景色
},
{
themeid: 1,
primarybtn: '#67c23a',
pribtnhover: '#85ce61',
},
{
themeid: 2,
primarybtn: '#e6a23c',
pribtnhover: '#ebb563',
},
];
export default colors;
3.通过 ajax 获取 theme.css ，将颜色值替换为关键词。
data() {
return {
active: 0,
themestylestr: '', // 存放 替换成关键词的 theme.css 内容
colors: themecolors, // 所有可选的主题颜色数组。即：theme-colors.js 文件export的数组
};
},
mounted() {
// 通过 ajax 获取 theme.css 的内容，并将颜色值替换为关键词
this.$http.getthemefile().then(res => {
this.themestylestr = this.getstyletemplate(res);
});
},
methods: {
// 获取样式模板：将颜色值替换为关键词。
getstyletemplate(data) {
let color = this.colors[0];
delete color.themeid;
let colormap = {};
object.keys(color).foreach(key => {
colormap[color[key]] = key;
});
object.keys(colormap).foreach(key => {
data = data.replace(new regexp(key, 'ig'), colormap[key]);
});
return data;
},
}
this.$http.getthemefile 方法
// 使用原生ajax获取换肤的样式文件
getthemefile() {
return new promise(resolve => {
const url = location.origin + '/static/styles/theme.css';
const xhr = new xmlhttprequest();
xhr.onreadystatechange = () => {
if (xhr.readystate === 4 && xhr.status === 200) {
resolve(xhr.responsetext);
}
};
xhr.open('get', url);
xhr.send();
});
}
4.把关键词再换回刚刚生成的相应的颜色值，并在页面上添加 style 标签
methods: {
// 点击切换主题
changetheme(index) {
this.active = index;
this.setnewstyle(this.themestylestr, this.colors[index]);
},
// 根据选择的主题颜色，把关键词换成相应的主题颜色，并在页面上添加 style 标签
setnewstyle(originalstyle, colors) {
let oldel = document.getelementbyid('theme-style');
let csstext = originalstyle;
object.keys(colors).foreach(key => {
csstext = csstext.replace(new regexp(key, 'ig'), colors[key]);
});
const style = document.createelement('style');
style.innerhtml = csstext;
style.id = 'theme-style';
oldel ? document.head.replacechild(style, oldel) : document.head.appendchild(style);
}
}
图片图标切换
1.图片切换和图标切换是同样的原理。在之前新建好的 theme.scss 文件追加图标引入的样式。
.theme-test-icon {
background: url("/static/images/common/list-modify-icon.svg");
}
2.在之前新建好的 theme-colors.js 文件追加图标路径
/*图片统一使用一个路径，更换主题时需要在images文件夹下新建主题文件夹，与原始路径对应，图片文件名须一致
应避免 primarybtn 与 primarybtnhover 同时出现，因为正则匹配 primarybtn 会把 primarybtnhover 部分匹配出来，达不到效果*/
const colors = [
{
themeid: 0,
primarybtn: '#409eff', // 主要按钮的背景色
pribtnhover: '#66b1ff', // 主要按钮的悬浮、聚焦背景色
imagepath: '/static/images', // 图片绝对路径
},
{
themeid: 1,
primarybtn: '#67c23a',
pribtnhover: '#85ce61',
imagepath: '/static/images/theme1',
},
{
themeid: 2,
primarybtn: '#e6a23c',
pribtnhover: '#ebb563',
imagepath: '/static/images/theme2',
},
];
export default colors;
3.引入需要主题切换的图片/图标，存放于 /static/images/ 之下，每个额外的主题图片需要一个文件夹进行存放，例如 /theme1 或者 /theme2。
注意：各个主题的图片文件名要保持不变；图片路径是根据 theme.scss 里面引入图片样式的路径来决定的，可以根据项目实际情况进行调整。
总结
以上所述是小编给大家介绍的vue项目实现换肤功能的一种方案分析,希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
JS 浅拷贝——Shallow copy 在 Canvas 绘图中的应用
网友评论