近项目要实现换肤效果,具体实现过程如下
首先在外部的index.html中引入整个项目的主题样式文件
<link rel="stylesheet" id="style" href="static/css/theme.css">
然后,在app.vue文件下的生命周期钩子函数里,放了一个这个
created() {
var style = localStorage.getItem("style");
if(style){
$("#style").attr("href",style); //实现将主题保存在内存中刷新浏览器不改变
}
}
实现在页面初始化的时候判断在本地localstorage里的style样式,进行渲染
接下来,就只需要在页面上放置一个按钮,按钮上有一个触发事件,传入参数,然后渲染你写好的不同样式的css,就实现换肤效果了
Change(e){
if(e == 1){
$("#style").attr("href","../static/css/themefire.css");
localStorage.setItem("style","../static/css/themefire.css");
}else if(e == 2){
$("#style").attr("href","../static/css/themefreeze.css");
localStorage.setItem("style","../static/css/themefreeze.css");
}
....//这里如果你要有更多的样式选择,就放这里
}