開發(fā)環(huán)境為
vue + element + sass
將以下組件引入項目
https://gitee.com/klus-liang/element-ui-skin-peeler-component.git
通過用戶選擇顏色轉(zhuǎn)換為css寫入項目<head>中，再通過sass全局變量來訪問顏色
通過監(jiān)聽顏色變化值來生成全局主要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;
}
}
}
}
