改变css变量，进行全局换肤

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、变量的声明 注： 1、声明变量的时候，变量名前面要加两根连词线（--）。 2、变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

@headerHeight: 60px;
@headerBgColor: #13c2c0;
:root{
    --headerBgColor:#13c2c0;
    --mixins_header_color:#fff;
    --mixins_left_tree_bg:#fff;
    --mixins_left_tree_color:#606266;
    --mixins_isHas_margin:true;
    --headerColor_rgb:#fff;
    --leftTreeBg_rgb:#fff;
    --leftTreeColor_rgb:#606266;
}

创建variable.css，都写在统一的文件中 在app.vue style 中 引入 @import url('./common/less/variable.less');

二、JavaScript 操作（样式配置）

let headerColor
let headerColor_rgb
let leftTreeBg
let leftTreeBg_rgb

headerColor = res.data.headerColor ? res.data.headerColor : '#fff'
leftTreeBg = res.data.leftTreeBg ? res.data.leftTreeBg : '#fff'
document.documentElement.style.setProperty('--mixins_header_color', headerColor)
document.documentElement.style.setProperty('--mixins_left_tree_bg', leftTreeBg)
// rgb 值
document.documentElement.style.setProperty('--headerColor_rgb', this.colorChange(headerColor_rgb))
document.documentElement.style.setProperty('--leftTreeBg_rgb', this.colorChange(leftTreeBg_rgb))

方法总结： 设置变量： document.body.style.setProperty('--primary', '#7F583F'); 读取变量：document.body.style.getPropertyValue('--primary').trim(); 删除变量：document.body.style.removeProperty('--primary');

创建systemColorMixins.js文件，在每个需要用的得页面进行引用： import systemColorMixins from '@/common/js/mixin/systemColorMixins' mixins: [systemColorMixins],

三、var() 函数 （样式设置） var()函数用于读取变量。

  .el-dialog__header {
    padding: 10px 15px;
    background: var(--headerBgColor);
    color: white;
   }

注：var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

background: var(--headerBgColor, #7F583F)

四、其他方法

        // 转换为 rgb 颜色 
        colorRgb(hex) {
            if (typeof hex !== 'string') {
                return null;
            }
            // 过滤非法输入
            if (!/^#[0-9ABCDEFabcdef]{1,6}$/.test(hex)) {
                return null
            }
            let pureStr = hex.slice(1);
            // 处理简写形式
            if (pureStr.length === 3) {
                // 7f7 => [7, f, 7] => [[7], [f], [7]] => [[77], [ff], [77]] => [77, ff, 77] => 77ff77
                pureStr = [].concat(...[...pureStr].map(v => [v]).map(v => v.concat(v))).join('')
            }
            let result = [];
            for (let i = 0; i < pureStr.length; i += 2) {
                result.push(parseInt((pureStr[i] + pureStr[i + 1]), 16));
            }
            return `rgb(${result.join(', ')})`
        },
        // 获取颜色的 ---> 相近值
        colorChange(param) {
            var arr = param.slice(4).split(",");
            let v0 = parseInt(arr[0]) - 50
            let v1 = parseInt(arr[1]) - 50
            let v2 = parseInt(arr[2]) - 50
            let rgb = 'rgb(' + v0 + ',' + v1 + ',' + v2 + ')'
            return rgb
        },

16进制颜色转换为 rgb 颜色，用于鼠标悬浮或者是选中的样式，这样颜色不至于写死，效果比写死的要好一些，如果您有更好的方法，请留言，谢谢！

本文已参与「新人创作礼」活动，一起开启掘金创作之路。