vue中换肤

Posted 2020-12-28 qiqizaixian

　　项目中期的时候，大佬对项目的色彩不满意，要求更换，这样产品就提出了需求，要求可以根据用户自己的需求去自己切换主题色；这边根据产品提供的几种颜色，看了下网上的博客，一开始我以为可以只引入一个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即可。感谢阅读，如果有哪怕一点点的指点都可以给我留言，我会好好学的。本人技拙，小乌龟慢慢爬，嘻嘻。。

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