83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
|
//导入色值表
|
|||
|
|
import formula from '@/constant/formula.json';
|
|||
|
|
import color from 'css-color-function';
|
|||
|
|
import rgbHex from 'rgb-hex';
|
|||
|
|
import axios from 'axios';
|
|||
|
|
/*
|
|||
|
|
*根据主题色 ，生成最新的样式表
|
|||
|
|
*/
|
|||
|
|
export const generateNewStyle = async (parimaryColor) => {
|
|||
|
|
//1.根据主色 生成色值表
|
|||
|
|
const colors = generateColors(parimaryColor);
|
|||
|
|
//2.获取当前 element-plus 的默认样式表 ， 并且把需要进行替换的色值打上标记
|
|||
|
|
let cssText = await getOriginalStyle();
|
|||
|
|
//3.遍历生成的色值表，在默认样式表 进行全局替换
|
|||
|
|
Object.keys(colors).forEach((key) => {
|
|||
|
|
// cssText = cssText.replace(
|
|||
|
|
// new RegExp('(:|\\s+)' + key, 'g'),
|
|||
|
|
// '$1' + colors[key]
|
|||
|
|
// );
|
|||
|
|
});
|
|||
|
|
return cssText;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*把生成的样式表写入到style中
|
|||
|
|
*/
|
|||
|
|
export const writeNewStyle = (newStyle) => {
|
|||
|
|
const style = document.createElement('style');
|
|||
|
|
style.innerText = newStyle;
|
|||
|
|
document.head.appendChild(style);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const generateColors = (primary) => {
|
|||
|
|
if (!primary) return;
|
|||
|
|
const colors = {
|
|||
|
|
primary: primary
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
Object.keys(formula).forEach((key) => {
|
|||
|
|
const value = formula[key].replace(/primary/g, primary);
|
|||
|
|
colors[key] = '#' + rgbHex(color.convert(value));
|
|||
|
|
});
|
|||
|
|
return colors;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* 获取当前 element-plus 的默认样式表
|
|||
|
|
*/
|
|||
|
|
const getOriginalStyle = async () => {
|
|||
|
|
const version = require('element-plus/package.json').version;
|
|||
|
|
// const url = `https://unpkg.com/element-plus@${version}/dist/index.css`;
|
|||
|
|
|
|||
|
|
// const { data } = await axios(url);
|
|||
|
|
// // 把获取到的数据筛选为原样式模板
|
|||
|
|
// return getStyleTemplate(data);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 返回 style 的 template
|
|||
|
|
*/
|
|||
|
|
const getStyleTemplate = (data) => {
|
|||
|
|
// element-plus 默认色值
|
|||
|
|
const colorMap = {
|
|||
|
|
'#3a8ee6': 'shade-1',
|
|||
|
|
'#409eff': 'primary',
|
|||
|
|
'#53a8ff': 'light-1',
|
|||
|
|
'#66b1ff': 'light-2',
|
|||
|
|
'#79bbff': 'light-3',
|
|||
|
|
'#8cc5ff': 'light-4',
|
|||
|
|
'#a0cfff': 'light-5',
|
|||
|
|
'#b3d8ff': 'light-6',
|
|||
|
|
'#c6e2ff': 'light-7',
|
|||
|
|
'#d9ecff': 'light-8',
|
|||
|
|
'#ecf5ff': 'light-9'
|
|||
|
|
};
|
|||
|
|
// 根据默认色值为要替换的色值打上标记
|
|||
|
|
Object.keys(colorMap).forEach((key) => {
|
|||
|
|
const value = colorMap[key];
|
|||
|
|
data = data.replace(new RegExp(key, 'ig'), value);
|
|||
|
|
});
|
|||
|
|
return data;
|
|||
|
|
};
|