开发环境为
vue + element + sass
将以下组件引入项目
https://gitee.com/klus-liang/element-ui-skin-peeler-component.git
通过用户选择颜色转换为css写入项目<head>中，再通过sass全局变量来访问颜色
通过监听颜色变化值来生成全局主要sass颜色变量以供使用
watch: {
async theme(val) {
if (typeof val !== 'string') return
for (let i = 10; i >= 0; i--) {
const o = Number((i / 10).toFixed(2))
switch (o) {
case 0.9:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-09", val+'E6');
break;
case 0.8:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-08", val+'CC');
break;
case 0.7:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-07", val+'B3');
break;
case 0.6:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-06", val+'99');
break;
case 0.5:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-05", val+'80');
break;
case 0.4:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-04", val+'66');
break;
case 0.3:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-03", val+'4D');
break;
case 0.2:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-02", val+'33');
break;
case 0.1:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-01", val+'1A');
break;
case 0.0:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary-00", val+'00');
break;
default:
document
.getElementsByTagName("body")[0]
.style.setProperty("--color-primary", val);
break;
}
}
}
}
