Vue项目实现换肤功能的一种方案分析
需求:网站换肤,主题切换。网站的主题色可以在几种常用颜色之间进行切换,还有相关图片、图标也要跟随主题进行切换。
不多说,先看下最终的实现效果:
文章由两部分组成: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项目实现换肤功能的一种方案分析,希望对大家有所帮助