vue中换肤

Posted qiqizaixian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中换肤相关的知识,希望对你有一定的参考价值。

  项目中期的时候,大佬对项目的色彩不满意,要求更换,这样产品就提出了需求,要求可以根据用户自己的需求去自己切换主题色;这边根据产品提供的几种颜色,看了下网上的博客,一开始我以为可以只引入一个css文件,然后像js一样提出一个变量改变这个变量就可以的,但是看到后期,发现css文件还是要准备多个。(如果有哪个亲能可以这样实现,希望能告知我一下,让我也见识下)

  这里我引入了sass,因为我可以在一个css文件中编写相关的样式代码,将需要的变量提出来,最后每次更改都可以只改变相应的变量值,然后自动生成相应的文件,我是把文件内容拷贝出来,放到vue的static静态目录下,新建了皮肤的skin文件夹,每个颜色弄了一个css文件,(因为sass需要安装ruby和sass相关插件才能生成css,所以需要开发的时候生成相应的css,不能在线编译,所以要引入多个css文件)引用sass就是统一编译处理,因为后期更改css工作量太大,为了提高工作效率和正确率才这样做的。

   我利用了elementUI的下拉菜单组件在项目的header头部组件中定义了颜色切换的下拉状态选择(公司内网,不能登录截图给大家看,你们可以去element看下拉的样式,脑补一下下,抱歉);

          

<el-dropdown trigger="hover" @command="changeColor">
  <span class="el-dropdown-link">/*选中的颜色*/</span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="0" name="green" style="background: green"> </el-dropdown-item>
        <el-dropdown-item command="1" name="pink" style="background: pink"> </el-dropdown-item>
        <el-dropdown-item command="2" name="#ffa737" style="background: #ffa737"> </el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

上面@command事件的

changeColor是切换肤色的方法,需要写在methods里面;这变项目中引入了vuex,所以为了方便多个组件共享数据状态,我把用户选择的颜色状态存储到了vuex中,(这个状态只能在
该用户登录时,对此次进行操作,对于永久保存状态的话就需要后台配合,去存储了,但是这个其实没有必要,还是看你们的项目要求吧);vue的data中声名变量themeStyle:this.$store.state.themeColor;
vuex里给了初始颜色值

我在index.html页面引入了默认的css,<link rel="stylesheet" href="static/skin/green.css" class="theme">;这里必须要给class,这样为下面的代码切换css保证页面
替换只引入了一个css,不然页面会重复引入多个
 changeColor(command){
            this.themeStyle = command;
            let theme = document.getElementsByClassName(‘theme‘)[0];
            if( this.themeStyle == 0){
                theme.setAttribute(‘href‘,‘static/skin/green.css‘);
                this.$store.commit(‘getThemeColor‘,0); /*把颜色存储到vuex*/
                document.getElementsByClassName(‘el-dropdown-link‘)[0].style.backgroundColor = ‘green‘
            }else if( this.themeStyle == 1){
                theme.setAttribute(‘href‘,‘static/skin/pink.css‘);
                this.$store.commit(‘getThemeColor‘,1);
                document.getElementsByClassName(‘el-dropdown-link‘)[0].style.backgroundColor = ‘pink‘
            }...
        }

当然初始化的时候也是要判断

   这是为了让用户切换肤色,退出后vuex还存储着颜色状态,再登入后选中的颜色还是显示相应的

mounted(){
 if( this.themeStyle == 0){
                document.getElementsByClassName(‘el-dropdown-link‘)[0].style.backgroundColor = ‘green‘
            }else if( this.themeStyle == 1){
                document.getElementsByClassName(‘el-dropdown-link‘)[0].style.backgroundColor = ‘pink‘
            }...
}

这样大多都完成了,只要提取主题色的css即可。感谢阅读,如果有哪怕一点点的指点都可以给我留言,我会好好学的。本人技拙,小乌龟慢慢爬,嘻嘻。。

学习之余,也要享受生活,最近刷完了镇魂,喜欢沈巍,上得厅堂,下得厨房,国名好老公,嘻嘻,推荐片尾曲《只是太在意》,好听~

    






以上是关于vue中换肤的主要内容,如果未能解决你的问题,请参考以下文章

vue less 换肤

Vue + Sass 实现简单的换肤功能

vue+element做换肤效果

vue2.0-基于elementui换肤[自定义主题]

网页换肤效果 系统界面切换皮肤样式

vue2.0-基于elementui换肤[自定义主题]