145  
查询码:00000898
vue换肤
作者: 裴蕾 于 2019年12月26日 发布在分类 / 数字可视化 / 三维制作设计 下,并于 2019年12月26日 编辑

近项目要实现换肤效果,具体实现过程如下
首先在外部的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");
          }
          ....//这里如果你要有更多的样式选择,就放这里
        }


 推荐知识

 历史版本

修改日期 修改人 备注
2019-12-26 17:29:03[当前版本] 裴蕾 1.0

知识分享平台 -V 4.8.7 -wcp